Question

我正在创建一个我希望能够启用/禁用的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>

Answer 1

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

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

1 个答案: