谷歌插件02 (在指定页面使用)

需求
在上次课程中,我们每次重新加载插件后,会在所有已经打开的浏览器标签中找到我们要求的页面并设置插件可用,这并不符合我们的实际使用习惯。在实际使用中,我们需要的是每次打开页面,只要页面符合我们的设定条件,就会将插件设置成可用状态。
说明
功能的实现涉及到2个知识点,第1个是content_scripts,将代码注入到页面中,第2个是消息发送,当页面符合条件时content_scripts向background(pageAction.js)发送消息使其设置插件可用。
目录结构
谷歌插件02 (在指定页面使用)_第1张图片
主要步骤
1.manifest.json中申明content_scripts
使用 content_scripts 需要先在manifest.json中进行声明

"content_scripts":[
    {
        "matches": ["https://*.baidu.com/"],
        "js": ["js/jquery-3.3.1.min.js","js/content.js"]
    }
]

2.manifest.json中添加目标网页url权限

"permissions":[
    "tabs",
    "https://*.baidu.com/"
]

3.content.js向background发送消息

chrome.runtime.sendMessage({todo:"showPageAction"});

4.backgroud设置消息监听

chrome.runtime.onMessage.addListener(function(request, sender, response){
   if(request.todo == "showPageAction"){
      chrome.tabs.query({active:true,currentWindow:true},function(tabs){
         chrome.pageAction.show(tabs[0].id);
      })
   }
});

效果图
指定的网站为https://www.baidu.com/
image.png
源码
链接:https://pan.baidu.com/s/10LiJ...
提取码:46o3

你可能感兴趣的:(chrome插件)