Chrome谷歌插件开发-01

只要会前端，简易的插件开发基本都没问题，主要都是些前端三大件。基本流程：

1、创建一个文件夹，比如命名为TestPlug

2、新建配置文件manifest.json【唯一必不可少的文件 —> 官方文档详细内容】

{"name": "TestPlug", //必填"version": "1.0",  //必填"manifest_version": 2, //必填且必须是int，不能是字符串，不然会加载不上插件"description": "An test plug-in for Chrome.", //选填"browser_action": { "default_icon": "icon.png", "popup": "popup.html" }, //选填。现在这样好像不行了，要把"popup": "popup.html"改为"default_popup": "popup.html"，亲测可以"permissions": ["http://*/*"] //选填
}

3、和配置文件并列的路径，放一张图片比如icon.png作为图标。再新建一个html文件popup.html，写入你要做的插件的代码内容，就基本的HTML内容，比如输出<p>Hello World！</p>。

4、打开Chrome，选择更多工具 - 扩展程序，即chrome://extensions

5、打开开发者模式，加载已解压的扩展程序，选中你创建的文件夹就可以了。

注意：
1、也可以选择用打包扩展程序，第一次打包不需要秘钥，之后重新打包就需要秘钥了。打包后会生成.crx（插件）和.pem（秘钥）两种格式的文件。
2、开发者模式下，更改代码后，不用重新导入，直接点击刷新就可以了。

Chrome谷歌插件开发-01相关推荐

10分钟带你入门chrome(谷歌)浏览器插件开发
整理chrome插件有哪些能力,插件开发入门,整理文档. chrome谷歌浏览器插件开发,听上去很高大上,其实只要熟悉HTML.CSS.JS即可开发,插件也是将html页面渲染出来并执行js脚本而已. ...
数栈技术干货：从0到1实现谷歌插件开发探索及应用
本文整理自:技术干货丨谷歌插件开发探索及其应用数栈是云原生-站式数据中台PaaS,我们在github和gitee上有一个有趣的开源项目:FlinkX,记得给我们点个star!star!star! g ...
Chrome浏览器插件开发入门
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 转载:h ...
Google Chrome 浏览器插件开发学习
2014/11/16 Google Chrome 浏览器插件开发学习因笔记存有文件,不便发表在cnblogs上,请到evernote里找笔记 "Google Chrome 浏览器插件开发学 ...
如何开启Chrome谷歌、Edge浏览器的夜间模式？
浏览器时间开的长了,眼睛越来越不舒服了怎么办?本教程来教你怎么强制开启浏览器的夜间模式. 开启后,浏览器使用深色主题自动渲染所有网页内容,这个功能支持Mac,.Windows.Linux.Andro ...
Chrome浏览器插件开发－淘宝自动登录
http://www.cnblogs.com/oshine/p/5379349.html 浏览器插件的介绍 Chrome浏览器插件开发的准备工作 manifest.json配置介绍页面如何注入scr ...
chrome浏览器插件开发-在当前网页中嵌入插件页面
chrome浏览器插件开发-在当前网页中嵌入插件页面既然想嵌入插件页面就是需要写html和css 在myPlugin中创建contentCss文件夹,里面创建index.css文件在manifes ...
【Chrome浏览器插件开发】浏览器插件运行机制03之实战使用Vue.js 3 + Vite 2开发出简易的浏览器插件(含源码）
文章目录知识点: 一.使用 vite 创建项目 1.1 环境搭建 1.2 安装vite工具 1.3 创建vite项目 1.4 进入项目并安装依赖 1.5 修改端口 1.6 运行项目二.创建项目资源 ...
chrome(谷歌)登录失败解决方案
chrome(谷歌)登录失败解决方案参考文章: (1)chrome(谷歌)登录失败解决方案 (2)https://www.cnblogs.com/zhengyb/p/10109591.html 备忘 ...

Chrome谷歌插件开发-01

Chrome谷歌插件开发-01相关推荐

最新文章

热门文章