以编程方式在扩展重新加载时注入内容脚本（chrome 扩展）答案

【问题标题】：Inject content script on extension reload programmatically (chrome extension)以编程方式在扩展重新加载时注入内容脚本（chrome 扩展）
【发布时间】：2016-05-25 00:00:35
【问题描述】：

我正在创建一个我希望能够启用/禁用的 chrome 扩展。我已经成功地制作了一个弹出窗口。问题是，如果我重新加载扩展程序（或者如果用户最初下载它），我的内容脚本默认为关闭。我可以只在 manifest.json 中注入内容脚本，但这会导致为任何新选项卡注入内容脚本——这是我不想要的。行为应该是，如果您下载/重新加载扩展程序，默认情况下它是打开的，但是您可以启用/禁用它，这适用于每个新选项卡。我试图在 background.js 中进行初始化，但显然在启动时不会调用它。

manifest.json

{
  "manifest_version": 2,
  "name": "Rotten Tomatoes Search",
  "description": "This extension searches rotten tomatoes with highlighted text",
  "version": "1.0",
  "browser_action": {
    "default_icon": "./icons/icon_on.png",
    "default_popup": "popup.html"
  },
  "permissions": [
      "activeTab",
      "<all_urls>",
      "background"
  ],
   "background": {
    "scripts": ["background.js"],
    "persistent": true
  },
  "content_scripts": [{
     "js": ["jquery-1.12.3.min.js"], 
     "matches": ["<all_urls>"]
   }]
}

background.js

var isExtensionOn = true;
chrome.tabs.executeScript({code: "console.log('backgournd hit...')"});

turnItOn();

chrome.extension.onMessage.addListener(
function (request, sender, sendResponse) {
    if (request.cmd == "setOnOffState") {
        isExtensionOn = request.data.value;
    }

    if (request.cmd == "getOnOffState") {
        sendResponse(isExtensionOn);
    }
});

function turnItOn() {
    chrome.browserAction.setIcon({path: "./icons/icon_on.png"});
    chrome.tabs.executeScript({file:"openTooltipMenu.js"});
    //$('#toggle').text('disable');
}

popup.js

document.addEventListener('DOMContentLoaded', function() {
// show different text depending on on/off state (for icon, handled by having default icon)
 chrome.extension.sendMessage({ cmd: "getOnOffState" }, function(currentState){
    if (currentState) $('#toggle').text('disable');
    else $('#toggle').text('enable');
 });
// allow user to toggle state of extension
var toggle = document.getElementById('toggle')
toggle.addEventListener('click', function() {
    //chrome.tabs.executeScript({code: "console.log('toggled...')"});
    chrome.extension.sendMessage({ cmd: "getOnOffState" }, function(currentState){
        var newState = !currentState;
        // toggle to the new state in background
        chrome.extension.sendMessage({ cmd: "setOnOffState", data: { value: newState } }, function(){
            // after toggling, do stuff based on new state
            if (newState) turnOn();
            else turnOff();
        });
    });
})
});

function turnOn() {
    chrome.browserAction.setIcon({path: "./icons/icon_on.png"});
    chrome.tabs.executeScript({file:"openTooltipMenu.js"});
    $('#toggle').text('disable');
}

function turnOff() {
    chrome.browserAction.setIcon({path: "./icons/icon_off.png"});
    chrome.tabs.executeScript({code: "$('body').off();"});
    $('#toggle').text('enable');
}

popup.html

<some code>
    <script src="./jquery-1.12.3.min.js"></script>
    <script src="./popup.js"></script><style type="text/css"></style>
  </head>
  <body>
    <div class="popupMenu" style="list-style-type:none">
      <div class="header">Rotten Tomatoes Search</div>
      <hr>
      <div class="menuEntry" id="toggle"></div>
    </div>
  </body>
</html>

【问题讨论】：

你应该考虑使用chrome.storage来存储持久化数据：developer.chrome.com/extensions/storage
@RobM.，谢谢，但这能解决我的问题吗？如果不在 background.js 中，我可以在哪里运行我的初始化脚本？

标签： javascript google-chrome-extension background

【解决方案1】：

我已经解决了这个问题。我的架构方法是错误的。应该全局注入 content_script 但检查脚本是否应该做某事。更清楚地说，在脚本中从后台页面获取状态并根据它做一些事情。以前，我只在加载弹出窗口或初始化背景时才注入脚本。此外，必须遍历所有窗口中的所有选项卡以更新所有选项卡中的状态（如果这是我们想要的）。

【讨论】：

您可能还想看看this answer，它解释了在打开标签的情况下（重新）加载扩展程序时脚本会发生什么。