onclick执行Chrome扩展，而不是页面加载 [英] Executing Chrome extension onclick instead of page load

问题描述

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

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

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

以下是我的代码：
清单。 json

  
 
 {
name：Get Response URL ，
version：1.0，
manifest_version：2，
browser_action：{
default_icon：mkto_icon.png，
name：点击获取URL
}，
content_scripts：[{
js：[contentscript.js]，
 ：[http://mydomain.com/*] 
}] 
} 
 
  

contentscript.js

  
 
 if（document.getElementsByName（returnURL））{
 alert（\ nThe此表单上的响应URL是：\\\
\\\
+ document.getElementsByName（returnURL）[0] .value ）; 
} 
 
  

解决方案

当用户点击浏览器操作图标和

网址图案时，您希望运行代码

是匹配

如果是这样，您可以使用
后台页面与Tabs API一起使用。

演示

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

manifest.json

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

  {
name：Get Response URL，
version：1.0，
manifest_version：2，
browser_action：{
name：点击获取URL
}，
background：{
 scripts：[background.js] 
}，
permissions：[https：//www.googl e.co.in/*] //将你所有的网址放在这里
 
 $ / code> 





background.js

将所有目标匹配网址放入一系列if条件中

  chrome.browserAction.onClicked.addListener（function（tab）{//当用户点击ICON 
时触发if（tab.url.indexOf（https://www.google.co.in/ ）！=！-1）{//检查用户点击的地方是否与我们的URL列表匹配
 chrome.tabs.executeScript（tab.id，{
file：contentscript.js 
}，function（）{//执行你的代码
 console.log（Script Executed ..）; //完成通知
}）; 
} 
}）; 
  

contentscript.js

  alert（Code Executed ...）; 
  

输出

当您浏览到< a href =https://www.google.co.in/ =noreferrer> https://www.google.co.in/ ，点击浏览器操作后，您会看到Alert .chrome.com / extensions / tabs.htmlrel =noreferrer>制表符API /background_pages.htmlrel =noreferrer>后台页面

I created a Chrome extension that works as expected except that it only executes when I load a page that matches the conditions in the manifest. I have tried for hours to make it execute by clicking on the extension icon to no avail.

The closest I have been able to what I want is that I have been able to make the extension icon click to run the code, but then it does not run it on the loaded page. It runs it on the extension's space instead of the page DOM.

In the current state my code only runs when a page in the specified domain opens. I want to run it only when it matches that rule, but only when I click the extension icon.

Here is my code: 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);
    }

解决方案

As i see you want to run code when

• User has clicked on Browser Action ICON and
• URL pattern is a match

If so, you have use Background pages in conjunction with Tabs API.

Demonstration

This is a sample demonstration of your use case and you can put all your code and assign permissions for all match URL(s).

manifest.json

Registered Background Page, Browser Action and Permissions for Target Pages.

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

Put all Your Target Matching URL in a series of if conditions here

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

Output

When you browse to https://www.google.co.in/ and after click of browser action you see Alert in the page.

References

• Tabs API
• Background Pages

这篇关于onclick执行Chrome扩展，而不是页面加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！