记录一个 Chrome 扩展的开发过程
chrome-extension-smms 是基于 smms 实现的一个
chrome
图床扩展。
其实很早之前就想学习Chrome
扩展开发 了,只是一直没有抽出时间,一直瞎忙。今天刚好闲下来了而且刚好看到一些跟Chrome
扩展开发相关的文章,于是就像动手写一个试试,于是就有了这篇文章。
什么是 Chrome 扩展 ?
首先,这里所说的 Chrome扩展
,并非 Chrome插件
,两者是有区别的,想要弄明白这两个概念的可以看看知乎的这个问题 Chrome 的插件(Plugin)与扩展(Extension)有什么区别?
- 扩展(Extension): 指的是通过调用
Chrome
提供的Chrome API
来扩展浏览器功能的一种组件,工作在浏览器层面,使用HTML
+Javascript
语言开发。比如著名的Adblock plus
。
如何开发一个 Chrome 扩展 ?
既然知道了 Chrome 扩展
是用 HTML
+ javascript
开发的了,那么我们首先要做的就是要搭建一个前端项目出来。
本文讲述的是一个
Chrome扩展
的大致过程,不会出现具体的功能如何实现。
初始化项目
由于我个人喜欢用 react.js
来构建前端应用, 这里我使用 dva-cli
来初始化项目,这个没有特殊要求,你可以随意使用自己喜欢的前端项目构建工具。
npm i -g dva-cli
dva new smms-extension
cd smms-extension
编写扩展的相关业务实现
在项目中编写业务的实现,例如 smms图床扩展 的逻辑是上传图片到图床,然后展示列表,提供删除图片和预览图片的方法,然后实现他。
打包前端项目并在 Chrome 中预览
npm run build
打包好应用后,添加 manifest.json
文件到打包好的资源的文件夹,我这里是 dist
文件夹。然后修改 manifest.json
文件:
{"manifest_version": 2,"name": "SMMS图床","description": "一个简单实用的图床扩展","version": "1.","icons": {"16": "qbhy.png","48": "qbhy.png","128": "qbhy.png"},"permissions": ["tabs"],"background": {"persistent": false,"scripts": ["background.js"]},"browser_action": {"default_icon": "qbhy.png","default_title": "SMMS图床","default_popup": "index.html"}
}
以上内容大概描述了该扩展的图标、默认打开方式、入口文件 、title
等属性,完整的 manifest.json
属性请移步 360浏览器扩展开发文档(其实就是翻译过后的 Chrome
扩展开发文档)。
注意
index.html
文件里面的资源引用问题,不能使用/index.js
这种方式引用脚本,要用相对路径引用,例如直接写index.js
,css同理。
然后用 Chrome
打开 chrome://extensions
页面,勾选开发者模式。
然后点击 加载已解压的扩展程序
选择包含 manifest.json
的文件夹,我这里是dist。
然后右上角就多了一个图标,不过现在还不是我们设置的那个图标,因为现在还没打包成 .crx
后缀的扩展。
然后点开就可以预览了
打包扩展程序
经过一番调试,确定扩展没有问题后,就可以打包了。
打包好后会在跟目录同级的地方生成一个跟目录同名的以 .crx
为后缀的扩展文件,这个文件就可以直接发给别人使用了,至于密钥文件我还不知道有什么用,反正我是删了。
后续步骤
最后初始化一个 git
仓库,上传上去,这事就算这么完了。什么?你要发布到 chrome store
?首先告诉你这要付 5$ 的开发者年费,对是 5 刀,不是 5 软妹币,其实也不算贵,毕竟装一个很愉快的逼比这点钱重要多了,但是我还是在发布的路上碰到坑了, 例如:
然后我就放弃了发布到 chrome store 的想法。
感兴趣的朋友可以自行尝试一下,传送门
本文主要想记录一个 Chrome 扩展开发的大致过程,同时希望让初学者能够看清 Chrome 扩展的神秘面纱后面的真相,所以许多细节并未深究,如读者有兴趣可以在下方评论与我一起讨论。
记录一个 Chrome 扩展的开发过程相关推荐
- chrome扩展crx构建_如何构建您的第一个Chrome扩展程序
chrome扩展crx构建 "Sit up straight!" my mom used to yell at me when I am fixated on my laptop ...
- 推荐一个Chrome扩展应用,能够自动去除CSDN广告
作为一个程序员,每天编程遇到问题时,少不了前往国内著名的CSDN网站上查信息,看是否有同行遇到类似问题.很多时候根据遇到问题的错误消息进行搜索,结果都是一篇篇CSDN博客.这些博客打开后都会显示很多广 ...
- 跟我一起写一个chrome扩展程序
在我没有看这本书之前,我都想象不到,原来chrome扩展程序可以这样写,真的非常有意思. 就是用最简单最基础的代码,然后就实现了一些非常有意思的玩意儿. 先看效果图 实际运用要和现实联系在一起,经历和 ...
- java 广告插件_徒手创建一个chrome扩展-屏蔽广告插件
创建一个文件夹,创建以下文件 maniftest.json background.js和 icon图片 maniftest.json文件设置如下 { "name": " ...
- Day 29:编写你的第一个 Google Chrome 扩展程序
今天的<30天学习30种新技术>,我决定去学习如何写一个 Chrome 扩展程序.在做了一些搜索之后,我发现一个 Yeoman 生成器可以用来写 Chrome 扩展程序.我们在这篇要写的扩 ...
- 介绍一个能避免 CORS 错误的 Chrome 扩展 - Moesif Origin CORS Changer
在前端开发人员做开发时,当进入到和后台 API 联调阶段时,不可避免会遇到 CORS 错误. 本文介绍一个 Chrome 扩展,可以用来在开发阶段避免 CORS 问题. 注意,这个扩展不能用于生产用途 ...
- 一个好用的时间管理Chrome扩展 - Calendar and Countdown
作为一个程序员,很多时候需要日期倒计时的功能(count down),比如还有多少天release某个产品的某个版本. 为此我找了一个Chrome扩展,名叫Calendar and Countdown ...
- Google Chrome 扩展程序开发
根据公司的规定,每月八小时,弹性工作制.所以大家平时来的不太准时,如果有事,下班也就早些回去了.所以一个月下来工作时间可能不够,但是公司的考勤日历是这样的: 除了请假和法定节假日外,其他样式显示都是一 ...
- 用 Chrome 扩展实现修改
用 Chrome 扩展实现修改 ajax 请求的响应 wincss 4 个月前 背景 Fiddler 和 Charles 是常见的 HTTP 调试器,它们会在本地运行一个代理服务器,可以查看浏览器或其 ...
最新文章
- 客户端爬取-答网友问
- 识别不了socket未知的名称或服务
- linux怎么用两个进程传值,linux下的C开发14,可执行程序如何传递参数?模拟shell执行命令...
- 中兴通讯首席科学家谈5G现状
- 哎~~~又是RichTextBox
- mysql设置作业_MySQL-作业1
- command line
- 数据库一对一,一对多,多对多关系
- go init函数_面试录 Go语言篇 内存模型
- 析构函数c+_了解C ++中的析构函数
- owncloud搭建过程
- php session 加密,php session cookie加密实例
- POJ 1201 Intervals
- winform图片操作
- 微信头像测试软件,心理测试:四个微信头像选一个,测试你的真实性格?
- php require失败,关于php:致命错误:require_once()[function.require]:要求打开失败
- 简要增量式PI控制器
- Android apk包体瘦身
- POJ 3674 Super Assassin 笔记 动态规划
- 蓝桥杯 扶老奶奶过街 (逻辑推理)