Question

在我的Firefox网络扩展程序中，我在浏览器工具栏中添加了一个新按钮，打开一个小弹出窗口。在此弹出窗口中，会显示一个按钮，该按钮应创建一个新的浏览器窗口，在新选项卡中打开几个URL，最后在这些页面上执行不同的内容脚本。

我的代码看起来像这样

的manifest.json

{
  "manifest_version": 2,
  "name": "Auto URL Opener",
  "version": "0.0.1",

  "description": "Auto URL Opener",
  "icons": { "48": "icon48.png" },

  "permissions": [ "tabs", "<all_urls>" ],

  "browser_action": {
    "default_icon": { "48": "icon48.png" },
    "default_title": "Auto URL Opener",
    "default_popup": "popup.html"
  }
}

popup.html

<!DOCTYPE html>
<html>
    <head>
         <meta charset="utf-8">
    </head>
    <body>
         <button id="openUrlsButton">Open URLs</button>
         <script src="popup.js"></script>
    </body>
</html>

popup.js

document.getElementById('openUrlsButton').addEventListener("click", function(e) {
    console.log('### create new window and open tabs');

    browser.windows.create({
        incognito: false,
        url: 'about:blank'
    }).then((window) => {
        console.log('### window created', window.id);

        browser.tabs.create({
            url: 'http://www.xkcd.com/',
            windowId: window.id
        }).then((tab) => {
            console.log('### tab1 created', tab.id);

            browser.tabs.executeScript(tab.id, {
                code: 'document.body.style.border = "5px solid green"'
            }).then(() => {
                console.log('### executed content script in tab1');  
            });
        });

        browser.tabs.create({
            url: 'http://www.google.com/',
            windowId: window.id
        }).then((tab) => {
            console.log('### tab2 created', tab.id);

            browser.tabs.executeScript(tab.id, {
                code: 'document.body.style.border = "5px solid blue"'
            });
        }).then(() => {
            console.log('### executed content script in tab2');  
        });
    });
}

我希望的行为是

打开一个新的浏览器窗口
在新浏览器窗口中打开三个选项卡
- 一个带有“about：blank”页面
- 使用xkcd网站
- 一个谷歌网站
执行xkcd网站的选项卡中的内容脚本
执行Google网站的标签中的内容脚本
浏览器控制台显示6条日志消息
- ### create new window and open tabs
- ### window created <window id>
- ### tab1 created <tab id>
- ### executed content script in tab1
- ### tab2 created <tab id>
- ### executed content script in tab2

实际行为是

打开一个新的浏览器窗口
在新浏览器窗口中打开三个选项卡
- 一个带有“about：blank”页面
- 使用xkcd网站
- 一个谷歌网站
内容脚本未执行
浏览器控制台显示6条日志消息中的2条
- ### create new window and open tabs
- ### window created <window id>

当打开新的浏览器窗口并自动关闭Web扩展弹出窗口时，感觉就像执行代码一样。

当我按以下方式重新考虑我的代码时

的manifest.json

{
  "manifest_version": 2,
  "name": "Auto URL Opener",
  "version": "0.0.1",

  "description": "Auto URL Opener",
  "icons": { "48": "icon48.png" },

  "permissions": [ "tabs", "<all_urls>" ],

  "background": {
    "scripts": ["background.js"]
  },

  "browser_action": {
    "default_icon": { "48": "icon48.png" },
    "default_title": "Auto URL Opener",
    "default_popup": "popup.html"
  }
}

popup.html

<!DOCTYPE html>
<html>
    <head>
         <meta charset="utf-8">
    </head>
    <body>
         <button id="openUrlsButton">Open URLs</button>
         <script src="popup.js"></script>
    </body>
</html>

popup.js

document.getElementById('openUrlsButton').addEventListener("click", function(e) {
    browser.runtime.sendMessage({
        task: "open urls"
    });
}

background.js

function openUrls() {
    console.log('### create new window and open tabs');

    browser.windows.create({
        incognito: false,
        url: 'about:blank'
    }).then((window) => {
        console.log('### window created', window.id);

        browser.tabs.create({
            url: 'http://www.xkcd.com/',
            windowId: window.id
        }).then((tab) => {
            console.log('### tab1 created', tab.id);

            browser.tabs.executeScript(tab.id, {
                code: 'document.body.style.border = "5px solid green"'
            }).then(() => {
                console.log('### executed content script in tab1');  
            });
        });

        browser.tabs.create({
            url: 'http://www.google.com/',
            windowId: window.id
        }).then((tab) => {
            console.log('### tab2 created', tab.id);

            browser.tabs.executeScript(tab.id, {
                code: 'document.body.style.border = "5px solid blue"'
            });
        }).then(() => {
            console.log('### executed content script in tab2');  
        });
    });
}

browser.runtime.onMessage.addListener(openUrls);

我得到了理想的行为，但我不确定这是否是一个很好的解决方案。

Answer 1

脚本1

无效，因为代码放在popup.js文件中，其生命周期取决于网络扩展程序的时长弹出窗口是开放且活跃的

脚本2

确实有效，因为代码放在background.js文件中，其生命周期取决于扩展名的持续时间开放和活跃。

脚本2方法是解决问题的正确方法

Firefox Web扩展内容脚本未在新创建的选项卡

1 个答案:

脚本1

脚本2