使用 chrome 扩展打开新选项卡并使用 jQuery 注入 css答案

【问题标题】：Open new tab with chrome extension an inject css with jQuery使用 chrome 扩展打开新选项卡并使用 jQuery 注入 css
【发布时间】：2014-06-01 00:14:51
【问题描述】：

我使用带有弹出窗口的 chrome 扩展来注入网站并隐藏一些 div。

现在的问题是，我想用 url: https://app.example.de/dashboard/ 并用我的 contentscript.js 注入样式
另一个问题是：有时应用程序会重新加载页面。在此之后，所有注射都将丢失。是否有机会在不单击 popup.html 按钮的情况下始终注入 https://app.example.de/dashboard/？

如果页面已经打开，以下代码可以正常工作。

manifest.json

{
"name": "example stealth mode",
"version": "1.1",
"description": "lorem ipsum",
  "browser_action": {
  "default_icon": "icon-on.png",
    "default_popup": "popup.html",
  "default_title": "example stealth mode"

},
"manifest_version": 2,
"content_scripts": [
    {
      "matches": ["https://*.app.example.de/*"],
      "js": ["jquery-1.11.0.min.js", "background.js"]
    }
  ],
    "background": {
        "scripts": ["background.js"]
    },
    "permissions": [
        "tabs", "https://*.app.example.de/*"
    ]   
}

popup.js

document.addEventListener('DOMContentLoaded', function () {
    document.getElementById('On').addEventListener('click', clickHandlerOn);
})
// An
function clickHandlerOn(e) {
    chrome.extension.sendMessage({directive: "popup-click"}, function(response) {
        this.close(); // close the popup when the background finishes processing request
    });
}

background.js

chrome.extension.onMessage.addListener(
    function(request, sender, sendResponse) {
        switch (request.directive) {
        case "popup-click":
            // execute the content script
            chrome.tabs.executeScript(null, { // defaults to the current tab

                file: "contentscript.js", // script to inject into page and run in sandbox
                allFrames: true // This injects script into iframes in the page and doesn't work before 4.0.266.0.
            });

            sendResponse({}); // sending back empty response to sender
            break;
        default:
            // helps debug when request directive doesn't match
            alert("Unmatched request of '" + request + "' from script to background.js from " + sender);
        }
    }
);

内容

$(document).ready(function() {
    $('div#hlXXXContent').hide();
    $('#hlYYY').hide();
    $('#hlZZZ').hide();
    $('h3.hlVVV').append(' Stealth Mode');
});

popup.html

<li><button class="hl123" id="On"><span class="hlSubmenuSelected">Stealthmode on</span</button></li>

【问题讨论】：

标签： google-chrome google-chrome-extension

【解决方案1】：

文件名 contentscript.js 很奇怪，因为它不是您使用的内容脚本。为什么不尝试使用run_at 并在每个目标页面加载时加载一些内容，这将是您的代码决定是否对页面执行更多操作的机会。

【讨论】：