Question

您好我一直在寻找很多教程，而且无法找到任何可能是我糟糕的谷歌技能，但我希望答案快速而简单。

计划

目的是制作一个使用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

您可以将代码包装在content scripts中，并使用“all_urls”作为匹配模式。

的manifest.json

{
  "name": "Test",
  "version": "1.0",
  "description": "Test",
  "content_scripts": [
    {
      "matches": [
        "<all_urls>"
      ],
      "js": [
        "content.js"
      ],
      "run_at": "document_end",
      "all_frames": true
    }
  ],
  "manifest_version": 2
}

content.js

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

Answer 2

您需要将matches设置为<all_urls>（您也可以在扩展程序中添加按钮以触发它）。以下是我的完整示例：

Extension Buttons

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

<强>的manifest.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。

如何使用Chrome扩展程序影响网站

2 个答案: