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

Question

在我的 Firefox 网络扩展程序中，我在浏览器工具栏中添加了一个新按钮，它会打开一个小弹出窗口。在此弹出窗口中显示一个按钮，该按钮应创建一个新浏览器 window，在新选项卡中打开几个 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');  
        });
    });
}

我想要的行为是

新浏览器window已打开
在新浏览器中window打开了三个标签页
- 一个有 "about:blank" 页
- xkcd 网站
- google 网站
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

实际行为是

新浏览器window已打开
在新浏览器中window打开了三个标签页
- 一个有 "about:blank" 页
- xkcd 网站
- google 网站
内容脚本未执行
浏览器控制台显示 6 条日志消息中的 2 条
- ### create new window and open tabs
- ### window created <window id>

感觉新浏览器window打开时代码执行中断，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 文件中 ，其生命周期取决于多长时间Web 扩展弹出窗口已打开并处于活动状态

脚本 2

确实有效，因为 代码位于 background.js 文件 中，其生命周期取决于多长时间扩展程序已打开并处于活动状态。

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

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

Firefox web extension content script is not executed in newly created tab

javascript

firefox-addon

firefox-addon-webextensions

脚本 1

脚本 2