javascript - 如何使用 chrome 扩展程序影响网站

Question

您好，我看了很多教程，但找不到任何内容，这可能是我的 google 技能不佳，但我希望答案快速而简单。

计划

目的是制作一个扩展程序，它将使用 javascript 附加任何网站。

当前状态

我目前已经编写了 javascript 附加代码并创建了基本声明

document.body.innerHTML += '<div id="adBar" style="background-color: #933131; width: 150px; height: 400px; position: fixed; left: 10px; top: 25%;"></div>'

问题

我在任何地方都找不到如何创建允许此脚本在每个页面的后台运行的 chrome 扩展程序，我只能找到如何在点击时弹出窗口。

我希望这是清楚和简单的。感谢所有帮助!

Answer 1

你需要设置matches至 <all_urls> (您也可以向扩展添加一个按钮来触发它)。这是我的完整示例:

Extension Buttons

My Extension
├── manifest.json
├── background.js
├── content.js
├── jquery-2.2.0.min.js
├── icon.png

list .json

{
    "manifest_version": 2,
    "name": "My Extension",
    "version": "0.1",
    "content_scripts": [
        {
            "matches": [
                "<all_urls>"
            ],
            "js": ["jquery-2.2.0.min.js","content.js"]
        }
    ],
    "browser_action": {
        "default_icon": "icon.png"
    },
    "background": {
      "scripts": ["background.js"]
    },
    "icons": {
        "16": "icon.png",
        "48": "icon.png",
        "128": "icon.png" 
    }
}

background.js

chrome.browserAction.onClicked.addListener(function(tab) {
  // Send a message to the active tab
  chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
    var activeTab = tabs[0];
    chrome.tabs.sendMessage(activeTab.id, {"message": "clicked_browser_action"});
  });
});

content.js

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    if( request.message === "clicked_browser_action" ) {

        //YOUR CODE GOES HERE

    }
  }
);

基本上，我向调用 content.js 的扩展添加了一个按钮一旦按下。监听器在 background.js 上.