网站建设与管理李洪心,内蒙网站建设seo优化,wordpress数据库优化插件,html网页wordpress文章目录 1、通过控制元素的显示隐藏达到popup页面切换的效果2、通过监听页面重新加载完成不同popup的切换3、直接修改popup页面location.href#xff0c;无需刷新页面 1、通过控制元素的显示隐藏达到popup页面切换的效果
下面在mv2版本的API下完成
实际上通过控制页面元素实… 文章目录 1、通过控制元素的显示隐藏达到popup页面切换的效果2、通过监听页面重新加载完成不同popup的切换3、直接修改popup页面location.href无需刷新页面 1、通过控制元素的显示隐藏达到popup页面切换的效果
下面在mv2版本的API下完成
实际上通过控制页面元素实现popup页面切换是一种伪切换从视觉上达到了切换效果实际上还是一个popup.html
popup.html示例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodydiv idid_1 styledisplay: none;内容一/divdiv idid_2 styledisplay: none;内容二/divdiv idid_3 styledisplay: block;内容三/div
/body
/html判断展示哪一个div的内容
// 引入jquery// do something 逻辑判断控制元素显示隐藏
$(#id_1).css({display: block}) // 控制#id_1的元素展示
$(#id_2).css({display: none}) // 其他的隐藏
$(#id_3).css({display: none})2、通过监听页面重新加载完成不同popup的切换
不需要在manifest里单独配置browser_action通过所在的页面决定使用哪一个popup.html页面
准备两个popup.html
path/popup_1.html
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodydiv idpopup_1 styledisplay: block;popup_1/div
/body
/htmlpath/popup_2.html
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodydiv idpopup_2 styledisplay: block;popup_2/div
/body
/html监听页面url判断加载哪个popup.html
// 注入需要先在manifest里面配置api的权限
// mv2版本API// 监听页面加载的API
chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) {console.log(tabId, changeInfo, tab)console.log(chrome)// 页面加载中if (changeInfo.status loading) {// 当前标签页在百度页面打开popup_1.html、否则打开popup_2.htmlif (tab.url.indexOf(www.baidu.com) 0) {chrome.browserAction.enable(tabId) // 在这个标签的为tabId的页面启用popup.htmlchrome.browserAction.setPopup({tabId: tabId,popup: /popup_1.html})} else {chrome.browserAction.enable(tabId) // 在这个标签的为tabId的页面启用popup.htmlchrome.browserAction.setPopup({tabId: tabId,popup: /popup_2.html})}}// 页面加载完成if (changeInfo.status complete) {// do something}
}) 需要注意的是通过**chrome.browserAction.setPopup**设置后的popup页面不会直接改变重新打开popup图标页面改变。
3、直接修改popup页面location.href无需刷新页面
这种方式popup.html的路径会直接改变页面也会随着改变不需要重新打开popup或者重新加载页面.
同样使用标题2中的页面示例 popup.js
// do something逻辑判断console.log(chrome.runtime)// 获取/popup_1.html页面在扩展中的位置
chrome.runtime.getURL(/popup_1.html).then(url {// url chrome://extensions/xxxxx/popup_1.html// 直接修改当前popup页面的location.href页面直接改变不需要重新打开扩展和重新刷新页面location.href url
})
