Javascript 如何使用chrome扩展影响网站

您好，我一直在看很多教程，但找不到任何东西。这可能是因为我的谷歌技能差，但我希望答案是快速和简单的

计划

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

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

当前状态

我现在已经编写了javascript附加代码并创建了基本的宣言

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

document.body.innerHTML+=''

问题

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

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

您可以将代码封装起来，并使用“所有URL”作为匹配模式

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
}

{
“名称”：“测试”，
“版本”：“1.0”，
“说明”：“测试”，
“内容脚本”：[
{
“匹配项”：[
""
],
“js”：[
“content.js”
],
“运行时间”：“文件结束时间”，
“所有帧”：正确
}
],
“清单版本”：2
}

content.js

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

document.body.innerHTML+=''

您需要将

匹配设置为

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

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

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

        //YOUR CODE GOES HERE

    }
  }
);

基本上，我在扩展中添加了一个按钮，一旦按下它，就会调用
content.js
。听众在
background.js上
感谢您的深入回答！我猜，将jQuery添加到内容脚本中可以让我在jQuery中编写代码，将Javascript更改为类似$（“body”）.append（）的内容；请注意，此代码将彻底破坏任何页面，因为它将破坏所有事件处理程序。不要使用
innerHTML
@xan您建议使用什么？创建一个元素，设置其属性并将其附加到body元素。@xan好的，我不知道如何使用纯Java脚本来完成，那么jQuery$（document）呢。准备好了吗$（body）.append（）；？如果您愿意在脚本中包含jQuery，那么可以使用
append
。我建议研究如何使用纯JS，这并不难。作为起点，
document.createElement