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

How to effect website using chrome extensions

本文关键字：影响 网站 程序 扩展 何使用 chrome      更新时间：2023-09-26

嗨，我一直在看很多教程，但找不到任何东西，这可能是我糟糕的谷歌技能，但我希望答案是快速而简单的。

A. 计划

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

当前状态

我目前已将javascript附加编码并创建了基本宣言

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

问题所在

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

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

您需要

将matches设置为<all_urls>（您也可以在扩展中添加一个按钮来触发它）。这是我的完整示例：

扩展按钮

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" 
    }
}

背景.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"});
  });
});

内容.js

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    if( request.message === "clicked_browser_action" ) {
        //YOUR CODE GOES HERE
    }
  }
);

基本上，我在扩展中添加了一个按钮，一旦按下content.js，就会调用它。侦听器在background.js 上。

您可以将代码包装在内容脚本中，并将"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
}

内容.js

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