快速制作一个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
快速制作一个chrome插件相关推荐
- 制作一个chrome插件
制作一个chrome插件 要做两方面的准备 文件准备 在文件夹中,必需的两个文件 manifest.json 用于配置文件 index.html 插件的界面效果 manifest.json的内容 { ...
- 自己动手制作一个Chrome插件 入门级
我们创建一个文件夹 暂时叫做 PoetryTab吧 在其中创建一个manifest.json 和 PoetryTab.html 内容如下: manifest.json {"manifest_ ...
- 怎样制作html插件,自己动手制作一个Chrome插件 入门级
我们创建一个文件夹 暂时叫做 PoetryTab吧 在其中创建一个manifest.json 和 PoetryTab.html 内容如下: manifest.json {"manifest_ ...
- 怎么编写一个chrome插件
怎么编写一个chrome插件 总觉得chrome插件这种东西很高端,很遥不可及.当然复杂的chrome插件开发起来确实比较困难,但是我们可以从一个简单的chrome插件demo慢慢入手,了解一下chr ...
- Unity使用Shader快速制作一个圆形遮罩
Unity使用Shader快速制作一个圆形遮罩 如何用Shader来做出圆形.切倒角和边缘虚化 Unity使用Shader快速制作一个圆形遮罩 橙子前言 一.创建Shader 二.创建Material ...
- 【Houdini】如何利用黑白的图片在Houdini中快速制作一个立体的模型
如何利用黑白的图片在Houdini中快速制作一个立体的模型 1.首先在Houdini右下角的Network中按tab创建一个Geometry 2.点击进入后,按tab创建一个trace 3.在trac ...
- 智能机器人c语言编程,【图片】教你快速制作一个简单的人工智能机器人（懂编程的人进来看）【科幻吧】_百度贴吧...
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 教你快速制作一个简单的人工智能机器人(懂编程的人进来看) 本文我首发于"人工智能吧",叫做<机器人理解人类语言>和< ...
- 实战教程｜使用知晓云快速制作一个简单的个人博客
我们在向大家征集开发课程大纲后,便陆续收到了很多建议.大家的热情与支持,是我们持续更新的动力. 由于大家的课程建议比较散,需要结合实际案例进行讲解,因此我们先从最简单的开始.本文将介绍如何通过知晓云的 ...
- 设计和实现一个 Chrome 插件提升登录效率
大家好,我是若川.最近组织了源码共读活动,感兴趣的可以点此加我微信ruochuan12 进群参与,每周大家一起学习200行左右的源码,共同进步.已进行4个月了,很多小伙伴表示收获颇丰. 前言 在我们的 ...
最新文章
- 快速加载生成nlp数据
- vsftpd 与TCP_wrapper 结合限制用户的ip地址登录
- window.addeventlistener 不能调用方法_方法入门（基础篇五）
- 国外计算机专业入门语言,【转自知乎】给想要报考计算机专业学生的一些建议...
- vis.js入门_使用TensorBoard数据Vis的TensorFlow手术分类器入门
- Hibernate之Inverse的用法
- pymysql安装_jqdatasdk手动安装
- 计算机体系结构与组成的区别
- 计算机中丢失xvidcore.dll,出现xvidcore.dll not found 问题的解决方法
- 可视化滤波器fvtool
- Android 录制视频添加时间水印，Android开发教程入门
- 2021-08-15nginx访问502,日志报错:connect() to 127.0.0.1:180 failed (13: Permission denied)解决
- 阿里云国际站-阿里云在其云峰会上推出新的直播电子商务解决方案
- Android开发中Html.fromHtml(String source)方法过时的替代方法
- I am fooled
- 项目管理工具—思维导图
- 信道仿真之加一定信噪比的带限高斯白噪声
- 【总结】PPT如何写的更美观
- word用户名的修改
- Android开发：基于Android Studio编写一个简单的账本
热门文章