如何开发一个chrome扩展

chrome是一个不错的浏览器,web开发者工作中一般都会使用chrome做为默认浏览器,它有很多扩展,给浏览器补充了各种功能,增强了用户体验。chrome具体能干什么?怎么做出来的呢?

chrome扩展是什么?

本质上是HTML+CSS+JavaScript组成的页面,所有文件打包成crx文件,安装到chrome,就可以使用

chrome扩展能干什么?

chrome扩展可以操作浏览器的书签、cookie、历史记录、右键菜单、tab选项卡、浏览器窗口,甚至可以读取系统信息包括CPU、内存等,扩展借助这些开放的接口,改善网页的实用性,更多信息请戳这里

怎么做一个扩展出来?

新建项目文件夹,在文件夹下新建配置文件manifest.json

manifest.json配置

{
    // 强制为数字2,http://open.chrome.360.cn/extension_dev/manifest.html#manifest_version
    "manifest_version": 2,
    "name": "扩展名称",
    "description": "扩展描述",
    "version": "版本号",
    "author": "作者",
    "permissions": ["需要的权限"],
    // 各种尺寸的icon
    "icons": {
        "16": "icon路径",
        "48": "icon路径",
        "128": "icon路径"
    },
    "browser_action": {
        "default_popup": "点击扩展icon弹出的那个HTML页面"
    },
    "options_page": "右键扩展icon跳转到扩展的配置HTML页面"
}

permissions就是要申请的权限,比如书签"bookmarks"

之后就可以开始写扩展具体页面和具体功能了,如搜索书签

chrome.bookmarks.search(搜索关键字, (result) => {
    // 操作搜索结果result
})

做的书签复杂的化,可能需要对扩展进行一些个性化配置,比如设置搜索书签的方式是表单值变化立即搜索还是按搜索按钮再搜索,设置结果利用localStorage存储在本地即可,扩展功能页面利用localStorage.getItem读取

开发过程中怎么调试?

打开chrome-更多工具-扩展程序

点击“加载已解压的扩展程序”,选择上面新建的项目文件夹,扩展就自动载入到chrome,在地址栏右侧可以看到一个icon,右键它,选择“审查弹出内容”,找到扩展里的js文件夹就可以打断点调试了。

扩展程序开发完了,可以打包成crx文件,点击上图“打包扩展程序”选择项目文件夹确定,打包完就可以将crx文件直接发送给身边的人安装体验,还可以发布到chrome网上商店,不过要先交5美元,是的,你提交免费的chrome扩展,还要收你钱,只收一次,不支持微信支付宝。

希望大家做出好的扩展,参考样例:一个书签搜索扩展,如果本文对你有帮助,可以给个star鼓励一下。

时间: 2024-10-08 10:16:56

如何开发一个chrome扩展的相关文章

Chrome扩展开发之三——Chrome扩展中的数据本地存储和下载

目录: 0.Chrome扩展开发(Gmail附件管理助手)系列之〇——概述 1.Chrome扩展开发之一——Chrome扩展的文件结构 2.Chrome扩展开发之二——Chrome扩展中脚本的运行机制和通信方式 3.Chrome扩展开发之三——Chrome扩展中的数据本地存储和下载 4.Chrome扩展开发之四——Gmail API的简单介绍 5.Chrome扩展开发之五——OAuth2的理解 6.Chrome扩展开发之六——GmailAssist核心功能的实现(包括Gmail API的使用中的

我的第一个chrome扩展(1)——读样例,实现时钟

学习chrome扩展开发: 与网页类似,需要的知识:html,javascript chrome扩展程序的构成: manifest.json:对扩展程序的整体描述文件 { "manifest_version": 2, //manifest_version:默认为2,可不写 //在第2版manifest下chrome出于安全不会运行html内的js代码 "name": "我的时钟", "version": "1.0&q

[原创]快速开发一个PHP扩展

http://blog.csdn.net/taft/article/details/596291 http://blog.csdn.net/heiyeshuwu/article/details/3453854 [原创]快速开发一个PHP扩展,布布扣,bubuko.com

跟我一起写一个chrome扩展程序

在我没有看这本书之前,我都想象不到,原来chrome扩展程序可以这样写,真的非常有意思. 就是用最简单最基础的代码,然后就实现了一些非常有意思的玩意儿. 先看效果图 实际运用要和现实联系在一起,经历和知识的体系不断的关联,才不会忘记 学习的知识如果在现实工作中没有用到,就会淡忘它.经历要达到一定的程度,项目要达到一定的阶段 这个就是一个很简单的例子,当我们输入facebook网站,就会弹出一个弹框,然后我们输入名字,这个网站就会被我们输入的名字所代替. 这个网站换成随便什么网站都是可以的.接下来

自己写一个chrome扩展程序 - 右键菜单扩展

最近在学习Spring,心想dotnet如何实现类似形式呢.于是想认真学习Casetle组件,发现没有书籍!而spring的书多得很.于是只好找网上教程了.发现系统的文章不多.Terrylee好多文章似乎都旧了,只好回头来看官方的文档.英文呀!好些单词需要去查,于是想到划词翻译.下载几个扩展程序提示不安全!好吧,自己写一个!开放的体系就是好! 百度搜一下好多的例子,不过几乎都没说background.js是怎么放在manifest.json.大部分代码来自这里 http://www.cnblog

实战开发一个Nginx扩展 (Nginx Module)

repo地址 https://github.com/wujunze/nginx-http-echo-module nginx_module_echo 使用echo指令输出一个字符串 Nginx 版本 Nginx1.0.10 https://github.com/nginx/nginx/releases/tag/release-1.0.10 开发环境 OS : CentOS Linux release 7.2.1511 (Core) 安装一个干净的 Nginx 下载 Nginx10.10 并且解压

我的第一个chrome扩展(2)——基本知识

1.manifest介绍界面:json格式 json:JavaScript Object Notation 包括两种结构: key:value对:{{"A1":"value1","A2":"value2","A3":"value3"},{…},{…}} 值的有序集合 {"books":["book1","book2","

我的第一个chrome扩展(3)——继续读样例

1.操作用户正在浏览的界面 http://www.ituring.com.cn/article/60212 问题:1.google未定义ID,用name为何无法找到? 2.如何让整个按钮一起动?原函数加几行赋值即可 var x =document.getElementById('s_btn_wr'); x.style.position = el.style.position; x.style.left = el.style.left; x.style.top = el.style.top;

Chrome扩展开发——Gmail附件管理助手

零.为什么会有这一套博文 2014年底虽然已经基本完成GmailAssist这一chrome扩展开发(当时也是作为软件工程课程的实践项目),但该扩展程序对于邮箱内邮件数目较多(大约五位数的数量级上)的情况,就很难正常工作了,这显然不是一个合格的软件,当时虽然终期验收顺利“交差”了,但这个软件的“不合格”却一直是我的一个心病.经过一年的学习,尽管对于前端开发的知识没有什么更进一步的掌握,但对软件工程的思想等等有了比起当时来说更深一层的认识.同时,当时虽然是一定程度上遵循敏捷开发的原则来进行的开发,