【问题标题】：Executing Chrome extension onclick instead of page load执行 Chrome 扩展 onclick 而不是页面加载
【发布时间】：2013-03-01 02:14:08
【问题描述】：

我创建了一个按预期工作的 Chrome 扩展程序，但它仅在我加载与清单中的条件匹配的页面时执行。我已经尝试了几个小时，通过单击扩展图标无济于事。

最接近我想要的是我已经能够使扩展图标单击以运行代码，但是它不会在加载的页面上运行它。它在扩展的空间而不是页面 DOM 上运行它。

在当前状态下，我的代码仅在指定域中的页面打开时运行。我只想在它匹配该规则时运行它，但只有在我单击扩展图标时才运行。

这是我的代码： manifest.json



    {
        "name": "Get Response URL",
        "version": "1.0",
        "manifest_version": 2,
        "browser_action": {
        "default_icon": "mkto_icon.png",
        "name": "Click to get URL"
        },
        "content_scripts": [{
            "js": ["contentscript.js"],
            "matches": ["http://mydomain.com/*"]
        }]
    }

contentscript.js



    if (document.getElementsByName("returnURL")){
        alert("\nThe Response URL on this form is:\n\n" + document.getElementsByName("returnURL")[0].value);
    }

【问题讨论】：

标签： google-chrome-extension

【解决方案1】：

我看到你想在什么时候运行代码

用户点击了浏览器操作图标和
网址格式匹配

如果是这样，您可以使用背景页面与 Tabs API 结合使用。

演示

这是您的用例的示例演示，您可以放置所有代码并为所有匹配的 URL 分配权限。

manifest.json

已注册的后台页面、浏览器操作和目标页面的权限。

{
        "name": "Get Response URL",
        "version": "1.0",
        "manifest_version": 2,
        "browser_action": {
        "name": "Click to get URL"
        },
        "background":{
            "scripts":["background.js"]
        },
        "permissions":["https://www.google.co.in/*"] //Put All your URL here
 }

background.js

将你的所有目标匹配 URL 放在一系列 if 条件中

chrome.browserAction.onClicked.addListener(function (tab) { //Fired when User Clicks ICON
    if (tab.url.indexOf("https://www.google.co.in/") != -1) { // Inspect whether the place where user clicked matches with our list of URL
        chrome.tabs.executeScript(tab.id, {
            "file": "contentscript.js"
        }, function () { // Execute your code
            console.log("Script Executed .. "); // Notification on Completion
        });
    }
});

contentscript.js

alert("Code Executed ... ");

输出

当您浏览到 https://www.google.co.in/ 并单击浏览器操作后，您会在页面中看到警报。

参考文献

【讨论】：

非常感谢。这正是我所缺少的。我在发布问题之前尝试过，但我之前做错了什么。这一次它就像一个魅力。 +100 我不能标记这个答案或投票，因为我是新来的，但如果可以的话，我会给它一个 +！

【解决方案2】：

使用 browserAction API，见here

onClick 事件可能会对您有所帮助。另请参阅来自谷歌的these exsamples：

【讨论】：