Javascript 如何添加按钮以启用后台脚本？_Javascript_Google Chrome Extension

Javascript 如何添加按钮以启用后台脚本？

javascript google-chrome-extension

Javascript 如何添加按钮以启用后台脚本？,javascript,google-chrome-extension,Javascript,Google Chrome Extension,我有一个background.js文件，它可以拦截web请求并替换User Agent头的值。根据下面的清单，它可以正常工作 { "manifest_version": 2, "name": "TamperHeaders", "description": "Replace HTTP headers and parameters", "version": "1.0", "browser_action": { "default_icon": "38.png" },

我有一个background.js文件，它可以拦截web请求并替换

User Agent

头的值。根据下面的清单，它可以正常工作

{
  "manifest_version": 2,

  "name": "TamperHeaders",
  "description": "Replace HTTP headers and parameters",
  "version": "1.0",

  "browser_action": {
    "default_icon": "38.png"
  },

  "background": {
    "scripts": ["background.js"]
  },
  "permissions": [
    "webRequest",
    "webRequestBlocking",
    "<all_urls>"
  ]
}

{
“清单版本”：2，
“名称”：“标题”，
“说明”：“替换HTTP头和参数”，
“版本”：“1.0”，
“浏览器操作”：{
“默认图标”：“38.png”
},
“背景”：{
“脚本”：[“background.js”]
},
“权限”：[
“网络请求”，
“webRequestBlocking”，
""
]
}

我想添加一个

default\u弹出窗口

，并在弹出窗口中添加一个按钮，说“单击我！”，然后单击按钮，扩展应该被激活（即background.js应该开始运行）。如何实现这一点？

允许您的扩展在不同的上下文之间进行通信。例如背景脚本、内容脚本和弹出窗口

要实现您想要做的事情，您需要在单击按钮时从弹出窗口向后台脚本发送一条消息，以注册您的chrome.webRequest侦听器。例如：

popup.html：

<html>
    <head>
        <script type="text/javascript" src="popup.js"></script>
    </head>
    <body>
        <button id="my-button">Click me</button>
    </body>
</html>

background.js

chrome.runtime.onMessage.addListener(
    function (request, sender, sendResponse) {
        if (request.action == 'STARTLISTENER') {
            chrome.webRequest.onBeforeRequest.addListener(function (details) {
                // web request logic
            };
        }
    }
)

以及这些变化

注意，由于HTML中的内容安全策略。因此，单独的popup.html和popup.js文件。

允许您的扩展在不同的上下文之间通信。例如背景脚本、内容脚本和弹出窗口

要实现您想要做的事情，您需要在单击按钮时从弹出窗口向后台脚本发送一条消息，以注册您的chrome.webRequest侦听器。例如：

popup.html：

<html>
    <head>
        <script type="text/javascript" src="popup.js"></script>
    </head>
    <body>
        <button id="my-button">Click me</button>
    </body>
</html>

background.js

chrome.runtime.onMessage.addListener(
    function (request, sender, sendResponse) {
        if (request.action == 'STARTLISTENER') {
            chrome.webRequest.onBeforeRequest.addListener(function (details) {
                // web request logic
            };
        }
    }
)

以及这些变化

注意，由于HTML中的内容安全策略。因此，popup.html和popup.js文件是分开的。

当你说

我想添加一个默认的弹出窗口，并在弹出窗口中添加一个按钮，说“单击我！”，然后单击按钮，扩展应该被激活

看起来你根本不需要弹出窗口。只需使用，当用户单击“图标”（浏览器操作）时，您的逻辑代码将被执行

chrome.browserAction.onClicked.addListener(function() {
    // you logic here
});

当你说

我想添加一个默认的弹出窗口，并在弹出窗口中添加一个按钮，说“单击我！”，然后单击按钮，扩展应该被激活

看起来你根本不需要弹出窗口。只需使用，当用户单击“图标”（浏览器操作）时，您的逻辑代码将被执行

chrome.browserAction.onClicked.addListener(function() {
    // you logic here
});

这很酷。但有时我可能想添加更多功能，这些功能可能需要添加为默认弹出窗口中的按钮。这很酷。但有时我可能想添加更多功能，这些功能可能需要作为默认弹出窗口中的按钮添加。

addEventListener

就是诀窍。这正好解决了我的问题：）

addEventListener

就是诀窍。这正好解决了我的问题：）