chrome扩展控制popup页面动态切换

妖狐艹你老母 2023-10-14 09:02 36阅读 0赞

#### 文章目录 ####

*  1、通过控制元素的显示隐藏达到popup页面切换的效果
 *  2、通过监听页面重新加载完成不同popup的切换
 *  3、直接修改popup页面location.href，无需刷新页面

## 1、通过控制元素的显示隐藏达到popup页面切换的效果 ##

***下面在mv2版本的API下完成***

实际上通过控制页面元素实现popup页面切换，是一种伪切换，从视觉上达到了切换效果，实际上还是一个popup.html

1.  popup.html示例

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <div id="id_1" style="display: none;">
            内容一
        </div>
        <div id="id_2" style="display: none;">
            内容二
        </div>
        <div id="id_3" style="display: block;">
            内容三
        </div>
    </body>
    </html>

1.  判断展示哪一个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页面

1.  准备两个popup.html

path：/popup\_1.html

path：/popup\_2.html

1.  监听页面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.html
        if (tab.url.indexOf('www.baidu.com') > 0) {
        
          chrome.browserAction.enable(tabId) // 在这个标签的为tabId的页面启用popup.html
          chrome.browserAction.setPopup({
        
            tabId: tabId,
            popup: '/popup_1.html'
          })
        } else {
        
          chrome.browserAction.enable(tabId) // 在这个标签的为tabId的页面启用popup.html
          chrome.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
    })