Chrome 插件自定义

最新推荐文章于 2024-09-03 16:40:55 发布

原创最新推荐文章于 2024-09-03 16:40:55 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#Chrome #插件 #发送消息 #事件

插件同时被 2 个专栏收录

2 篇文章

订阅专栏

chrome

1 篇文章

订阅专栏

本文介绍了Chrome插件的基本构成，包括manifest.json、background.js和contentScript.js的作用。manifest.json是插件的核心配置文件，background.js在浏览器后台运行，contentScript.js则注入到网页中执行。重点讲解了如何在不同组件间进行消息传递，并提供了基础的代码示例。此外，还提及了contentScript.js中可执行各种JavaScript操作，甚至引入外部框架。最后，作者分享了一个点击插件图标触发的demo源码链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Chrome 插件自定义
首先介绍一下Chrome插件里面都具体是什么，这里采用了大白话的方式通俗易懂。

插件的核心就是一个json文件：manifest.json 。具体的结构我就不详细的介绍了，毕竟网络上的相关内容有很多，其次介绍一下background.js 这是一个浏览器内部运行的插件，可以理解是再浏览器中使用，而不是在网页中使用，就像一个作用域一样，它属于外层，而网页属于内层。

其次就是contentScript.js 这个是一个注入到js中的代码，就像我们日常引用的js一样，这个具体的后面细说。最后酒水popup，这是一个在浏览器上的一个窗口，在Chrome中地址栏的右边，点击icon之后会存在一个作用区间，可以在里面执行一些逻辑。

基础的大概的内容就是这些，具体的实现我来记录一下。

先来了解一下我的目录结构
在这里插入图片描述
首先创建manifest.json

{
 "manifest_version": 2,
 "name": "name",
 "description": "This extension say hello to you.",
   "version": "1.0",
    "permissions": ["tabs", "<all_urls>"],
    "browser_action": {
      "default_icon": "icon.png", //icon图标
     "default_popup": "popup.html" //默认的popup
   },
  "background": {
     "page": "background.html"
   },
  "content_scripts": [{ //引用的js
       "matches": ["<all_urls>"],
       "js": ["jquery.js","contentscript.js"]
  }]
}

这里其实没有好介绍的，网上有很多的资料，其次就介绍一下如何进行backgroundjs和popup以及contentScript之间进行发送消息。废话少说，直接上代码：

//background.js
chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    console.log(sender.tab ?
                "from a content script:" + sender.tab.url :
                "from the extension");
    if (request.greeting == "hello")
      sendResponse({farewell: "I'm backgroud,goodbye!"});
  });

//popup.js
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
  chrome.tabs.sendMessage(tabs[0].id, {greeting: "hello"}, function(response) {
  });
});

//contentScript.js
chrome.runtime.sendMessage({greeting: "hello"}, function(response) {
  console.log(response.farewell);
});
 
chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
			console.log("********************************XPORT****TOOL****************************START******************")
			console.log("open the chrome tool ");
    // if (request.greeting == "hello"){
    //   sendResponse({farewell: "I'm contentscript,goodbye!"});
    // }
  });

以上就是基础的沟通构建。
剩下的就是可以在contentScript中去创建各种js语言进行操作了，也可以引入jq等框架。
以上就是今天简单研究了一下的理解。
后面附上一个demo源码，使用的方式是点击图中的icon
在这里插入图片描述