且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

onclick执行Chrome扩展,而不是页面加载

更新时间:2023-12-05 20:43:46

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

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

      是匹配



  • 如果是这样,您可以使用
    后台页面与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 ...); 



    输出



    当您浏览到 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