从零开始,轻松打造个人化Chrome浏览器插件

简介: 从零开始,轻松打造个人化Chrome浏览器插件

说在前面

在我日常开发以及娱乐生活中,浏览器是我使用频率较高的一个应用,当我大学拥有第一部电脑开始,之后不论电脑换成什么,以及使用的是什么系统,我的首选浏览器都是Chrome,不仅仅是因为其速度快,更多是它丰富的扩展在吸引我,那么大家有没有想过如何自己来开发一个Chrome浏览器插件呢?是不是有的同学会觉得Chrome浏览器插件的制作难度会很大呢?今天就让我来带你们看看一个简单的Chrome浏览器插件的编写过程,并给大家制作一个简单的插件模板,大家可以通过模板来进行快速开发。

一、项目结构

一个完整的插件目录结构如下:

(一)html + js

1、manifest.json

简单配置,具体配置说明已在配置项后标出。

{
  "manifest_version": 2, //版本号,由google指定为2
  "name": "helloWorld", //插件名称
  "version": "1.0", //插件版本
  "description": "hello world 插件", //插件描述
  "icons": {
    //插件图标
    "128": "img/logo.jpg",
    "48": "img/logo.jpg",
    "16": "img/logo.jpg"
  },
  "browser_action": {
    "default_icon": "img/logo.jpg", //插件图标
    "default_popup": "default_popup" //点击图标后弹出的html互动文件
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"], //匹配url
      "js": ["bg.js"], //执行脚本
      "run_at": "document_start" //脚本运行时机
    }
  ],
  "permissions": ["tabs", "activeTab"] //权限申请
}

使用"content_scripts"你可以修改你当前访问的页面的dom,主要是靠js实现的,里面的"matches"是一个数组,里面装的是一些匹配的规则,意思就是当你的页面的地址满足数组里面的值的时候就会操作js文件,all_urls表示所有网页都会加载脚本。而"js"里面的是具体的操作,具体操作就是要自己写了。

2、popup.html

插件弹窗页,可以直接编写一个html页面,在manifest.json中的default_popup项进行配置即可。

<!DOCTYPE html>
<html lang="">
  <head>
    <title>helloWorld</title>
    <meta charset="utf-8" />
  </head>
  <body style="width: 200px; height: 200px">
    <h1 id="message">你好</h1>
    <input id="input1" type="text" />
  </body>
  <script src="js/popup.js"></script>
</html>
3、popup.js

插件弹窗页的脚本js代码,在popup.html页面中引入即可。

(function () {
  const input1 = document.getElementById("input1");
  const message = document.getElementById("message");
  input1.addEventListener("keyup", (e) => {
    message.innerHTML = "你好" + e.target.value;
    chrome.tabs.query({ active: true, currentWindow: true }, function (tab) {
      chrome.tabs.sendMessage(
        tab[0].id,
        {
          action: "hello",
          data: message.innerHTML,
        },
        function (response) {
          console.loig("收到回复:", response.state);
        }
      );
    });
  });
})();
4、bg.js

运行在浏览器打开tab窗体的脚本,需要在manifest.json中的content_scripts中进行配置。

chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
  const { action, data } = request;
  console.log("%c Line:4 🥔 action,data", "color:#b03734", action, data);
  sendResponse({ state: "已接收到数据" + data });
});

(二)vue + js

1、使用vue来编写插件弹窗页

使用vue来编写插件弹窗页面,我们可以将项目结构简化成这样,只需要修改manifest.json中的default_popup为vue项目打出的dist包即可。

{
  "manifest_version": 2, //版本号,由google指定为2
  "name": "helloWorld", //插件名称
  "version": "1.0", //插件版本
  "description": "hello world 插件", //插件描述
  "icons": {
    //插件图标
    "128": "img/logo.jpg",
    "48": "img/logo.jpg",
    "16": "img/logo.jpg"
  },
  "browser_action": {
    "default_icon": "img/logo.jpg", //插件图标
    "default_popup": "demo/dist/index.html" //点击图标后弹出的html互动文件
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"], //匹配url
      "js": ["bg.js"], //执行脚本
      "run_at": "document_start" //脚本运行时机
    }
  ],
  "permissions": ["tabs", "activeTab"] //权限申请
}

并将popup.js文件移到vue项目中,在index.html中引入即可。

二、浏览器导入插件

(一)进入chrome扩展程序管理页

(二)加载扩展程序

(三)页面使用插件

三、模板源码

(一)gitee源码下载

模板代码已上传到gitee,具体地址如下:

https://gitee.com/zheng_yongtao/chrome-plug-in.git

(二)依赖下载

拉取模板代码之后需要先下载vue模板的依赖(npm install)。

(三)vue打包

安装好vue模板的依赖之后,就可以对vue项目进行打包(npm run build)。

(四)命令行快速安装

目前插件模板已集成到脚手架jyeontu工具中,我们可以通过它来快速生成一个插件目录模板。

  • 安装脚手架
npm install -g jyeontu

安装完成后运行创建模板命令

jyeontu create

拉取最新模板文件之后选择创建chrome浏览器模板即可。

说在后面

🎉 这里是 JYeontu,现在是一名前端工程师,有空会刷刷算法题,平时喜欢打羽毛球 🏸 ,平时也喜欢写些东西,既为自己记录 📋,也希望可以对大家有那么一丢丢的帮助,写的不好望多多谅解 🙇,写错的地方望指出,定会认真改进 😊,偶尔也会在自己的公众号『前端也能这么有趣』发一些比较有趣的文章,有兴趣的也可以关注下。在此谢谢大家的支持,我们下文再见 🙌。

目录
相关文章
|
13天前
|
人工智能 程序员 测试技术
AI编程:Coze + Cursor实现一个思维导图的浏览器插件
本文是小卷关于AI编程工具学习的第3篇文章,通过开发一个思维导图生成工具,详细介绍了AI编程的完整流程。从需求分析、插件选择(如Coze的TreeMind),到创建测试工作流、发布API,再到整合API和开发浏览器插件,最终实现了用户选中文字后生成思维导图的功能。文章展示了如何利用现有工具高效开发,并总结了AI编程的优势与未来趋势。
95 14
|
30天前
|
Web App开发 人工智能 JSON
AutoMouser:AI Chrome扩展程序,实时跟踪用户的浏览器操作,自动生成自动化操作脚本
AutoMouser是一款Chrome扩展程序,能够实时跟踪用户交互行为,并基于OpenAI的GPT模型自动生成Selenium测试代码,简化自动化测试流程。
139 17
AutoMouser:AI Chrome扩展程序,实时跟踪用户的浏览器操作,自动生成自动化操作脚本
|
1月前
|
Web App开发 存储 开发者
Chrome 插件上架发布全流程指南
浏览器插件开发完以后,要发布到 Chrome Web Store上,也是需要颇费一番周折的,本文就从注册账号开始,一直到最后发布上架的全流程进行指导,希望帮助你提供一些经验,避免踩坑,耗时耗力。
249 8
|
1月前
|
Web App开发 搜索推荐 开发者
浏览器插件上架指南:如何把你的产品搬上浏览器插件市场
在实践了 Chrone、Firefox、Edge、Opera 等 几个主要的插件平台的上架发布工作后,我觉得很有必要把这个过程和思考记录下来,分享给大家,希望能提供一些参考和避坑的经验。我想通过这篇文章,和大家聊聊「为什么我要做这件事」,以及「这个系列文章会包含哪些内容」。我想用一个系列的文章,记录我是如何把 EmojiClick 搬到浏览器插件市场的,也给大家提供一些借鉴经验。
85 19
|
1月前
|
Web App开发 安全 前端开发
一个接口4个步骤轻松搞定最新版Chrome、Edge、Firefox浏览器集成ActiveX控件
目前的浏览器市场,谷歌浏览器占据了半壁江山,因此,谷歌也是最有话语权的,2015年开始取消支持 NPAPI 插件,2022 年10月停止支持 PPAPI 插件;而曾经老大哥IE浏览器也已停止服务,退出历史舞台,导致大量曾经安全、便捷的ActiveX控件无法使用。为了解决这个难题,本人特研发出allWebPlugin中间件,重新让所有ActiveX控件能在谷歌、火狐等浏览器使用。
|
1月前
|
Web App开发 数据采集 JavaScript
Chrome浏览器实例的TypeScript自动化脚本
Chrome浏览器实例的TypeScript自动化脚本
|
3月前
|
Web App开发 缓存 安全
WIN11 Chrome 双击打不开闪退及Chrome浏览器不能拖拽文件crx
【11月更文挑战第6天】本文介绍了 WIN11 系统中 Chrome 浏览器双击打不开闪退及不能拖拽文件 crx 的原因和解决方法。包括浏览器版本过旧、扩展程序冲突、硬件加速问题、缓存过多、安全软件冲突、系统文件损坏、用户配置文件损坏等问题的解决方案,以及 crx 文件的屏蔽、权限问题和文件格式问题的处理方法。
366 2
|
3月前
|
Web App开发 Linux iOS开发
Chrome浏览器如何导出所有书签并导入书签
【11月更文挑战第4天】本文介绍了如何在 Chrome 浏览器中导出和导入书签。导出时,打开书签管理器,点击“整理”按钮选择“导出书签”,保存为 HTML 文件。导入时,同样打开书签管理器,点击“整理”按钮选择“导入书签”,选择之前导出的 HTML 文件即可。其他主流浏览器也支持导入这种格式的书签文件。
2424 2
|
3月前
|
Web App开发 JavaScript 前端开发
使用 Chrome 浏览器的内存分析工具来检测 JavaScript 中的内存泄漏
【10月更文挑战第25天】利用 Chrome 浏览器的内存分析工具,可以较为准确地检测 JavaScript 中的内存泄漏问题,并帮助我们找出潜在的泄漏点,以便采取相应的解决措施。
521 9
|
4月前
|
Web App开发 开发者

热门文章

最新文章