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

【问题标题】：Firefox web extension content script is not executed in newly created tabFirefox Web 扩展内容脚本未在新创建的选项卡中执行
【发布时间】：2017-07-30 12:09:03
【问题描述】：

在我的 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>

当新的浏览器窗口打开，网页扩展弹窗自动关闭时，感觉就像代码的执行被中断了。

当我按照以下方式重构代码时

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);

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

【问题讨论】：

请edit 成为主题的问题：包括一个重复问题的minimal reproducible example。对于 Chrome 扩展程序或 Firefox WebExtensions，这几乎总是意味着包含您的 manifest.json 和一些背景、内容和/或弹出脚本/HTML。寻求调试帮助的问题（“为什么这段代码没有按我想要的方式工作？”）必须包括：（1）期望的行为，（2）特定的问题或错误以及（3）重现它所需的最短代码在问题本身中。另请参阅：What topics can I ask about here? 和 How to Ask。
当您尝试安装和使用扩展？
@Makyen 感谢您的反馈。我已经用完整的工作代码、更详细的描述和期望/实际行为更新了我的问题。
@StigP.：我提供了解决方案，如果解决了您的问题，请采纳答案
@Sudarshan，IMO，在发布答案后不到一分钟就要求接受是不合适的。一般来说，OP 在接受答案之前等待一段时间是合理的，以查看是否会发布其他可能更好的答案。一旦一个答案被接受，另一个答案被发布的可能性要小得多。在这种情况下，OP 对添加完整代码的问题所做的编辑有效地使其成为一个全新的问题（现在可以回答）。

标签： javascript firefox-addon firefox-addon-webextensions

【解决方案1】：

脚本 1

不起作用，因为代码放在 popup.js 文件中，其生命周期取决于 网络扩展弹出窗口打开和活动的时间强>

脚本 2

确实有效，因为 代码位于 background.js 文件中，其生命周期取决于扩展程序打开和活动的时间 .

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

【讨论】：