admin管理员组文章数量:1643240
需求背景
在平时使用Chrome的过程中,很喜欢用添加书签收藏的能力,而且可以利用浏览器的同步功能,非常方便,所以对于一个Chrome的重度用户来说,书签越来越多,自然而然发现找收藏的文章就特别的麻烦,浏览器自带的搜索书签也感觉不太好用,不能将所有的书签一次性的展现在眼前,所以就考虑使用来实现个搜索扩展
这个插件写在很久以前,当时正好在了解vue,正好想写demo练手,所以就有了这个vue+element实现的chrome的插件
扩展开发入门
Chrome 插件开发有一整套的指导,详见 Chrome Extend the Browser,这里面从介绍了:
- 什么是扩展
- 如何开发一个扩展
- 一些扩展的例子
上面的内容太多了,开发一个商用的扩展可以系统学习下,我们这就简单的介绍我这个插件里用的一些必备的元素,后续遇到的再去找就行了
manifest文件
每个扩展都必须有一个JSON格式的清单文件,命名为manifest.json
。该文件是扩展运行的入口。下面是一个示例的说明,全量配置见连接,点进去可以看一些示例和解释说明
{
"manifest_version": 2, // 版本号,当前就是2
"name": "Custom Chrome", // 扩展名,展示在扩展面板上
"description": "management bookmarks", // 扩展描述,展示在扩展面板上
"version": "0.0.1", // 扩展的版本号
"browser_action": { // 指明这个插件的action方式,我们这里使用popup
"default_icon": "img/icon48.png", // 默认icon
"default_title": "clam ideas", // 默认title
"default_popup": "popup.html" // popup的时候展示的页面,是个html页面
},
"content_scripts": [{
"matches": ["https://gitee/*/issues/*"],// 在匹配上这个规则的页面上下文中执行下面的脚本
"js": ["js/content-script/issues.js"] //脚本内容,可以访问DOM
}],
"icons": { // icon 列表
"24": "img/icon24.png",
"48": "img/icon48.png",
"128": "img/icon128.png"
},
"background": {
"scripts": ["js/background.js"], // 后台会一直执行的脚本
"persistent": false
},
"permissions": ["bookmarks"], // 声明使用书签权限,从而可以使用Chrome API读取书签
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'" // 安全策略
}
- 扩展面板:通过
chrome://extensions/
打开的一个个扩展卡片browser_action
:和page_action
二选一,可以在地址栏右侧出现ICON,然后以tooltip、popup、badge的方式呈现content_scripts
:定义一个脚本,可以再web页面的上下文中运行。再这里文件里,可以访问DOM,常用来操作页面DOM,比如隐藏某个元素等background
:字面意思,就是会在Chrome后台会一直运行的脚本,常用来增强Chrome本身的体验,在后台监听某些事件,并执行对应的handler,比如监听鼠标右键;permissions
:声明使用到的权限,这个类似于Android开发,你需要使用更多的Chrome的权限,需要声明告诉它
有个manifest之后,就添加对应的文件即可
扩展实战
实现的这个扩展,主要是展示所有书签,并且支持搜索,源码见gitee,示例图如下:
运行的原理:
上文介绍过扩展的启动入口就是 manifest,定义好之后,我们主要使用的是popup(browser_action)的能力,当点击的时候popup一个html页面,即 popup.html,所以我们只需要在该页面中通过Chrome的API获取到所有的书签,然后提供根据字符串过滤的功能即可,具体的代码见源码,有一些冗余的代码(想实现一些功能,但是需求不强烈就么写)不影响使用
对书签(bookmarks)的操作详见:https://developer.chrome/extensions/bookmarks
扩展本地安装
- 下载源码到一个目录里
- chrome 打开
chrome://extensions/
- 点击 加载已解压的扩展程序,选中包含manifest的那个文件夹即可
- 这样在扩展列表就可以看到这个扩展,效果如上图
版权声明:本文标题:Chrome扩展实战——实现书签快速搜索功能 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dongtai/1729353374a1198166.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论