开发背景
- 这个字读啥来着，怎么就忘记了？这句话，这个梗什么意思来着？ctrl+c， 打开度娘ctrl+v一下
- 外文文献阅读障碍，这个词啥意思，一边有道，一边文献，真香。。。。
- 开发过程中，或者生活中，想给某个词定义一个英文名。
效果截图
为什么选择chrome插件
- Chrome占有率更高，更多人用；
- 开发更简单；
- 应用场景更广泛，Firefox插件只能运行在Firefox上，而Chrome除了Chrome浏览器之外，还可以运行在所有webkit内核的国产浏览器，比如360极速浏览器、360安全浏览器、搜狗浏览器、QQ浏览器等等；
- 除此之外，Firefox浏览器也对Chrome插件的运行提供了一定的支持；
官方接口文档
核心文件manifest.json介绍
这是一个Chrome插件最重要也是必不可少的文件，用来配置所有和插件相关的配置，必须放在根目录。其中，manifest_version、name、version3个是必不可少的，description和icons是推荐的。
{
// 清单文件的版本，这个必须写，而且必须是2，或者3
"manifest_version": 2,
// 插件的名称
"name": "辅助阅读工具",
// 插件的版本
"version": "1.0.0",
// 插件描述
"description": "简单的Chrome扩展demo",
// 图标，一般偷懒全部用一个尺寸的也没问题
"icons":
{
"16": "img/icon.png",
"48": "img/icon.png",
"128": "img/icon.png"
},
// 会一直常驻的后台JS或后台页面
"background":
{
// 2种指定方式，如果指定JS，那么会自动生成一个背景页
"page": "background.html"
//"scripts": ["js/background.js"]
},
// 浏览器右上角图标设置，browser_action、page_action、app必须三选一
"browser_action":
{
"default_icon": "img/icon.png",
// 图标悬停时的标题，可选
"default_title": "这是一个示例Chrome插件",
"default_popup": "popup.html"
},
// 当某些特定页面打开才显示的图标
/*"page_action":
{
"default_icon": "img/icon.png",
"default_title": "我是pageAction",
"default_popup": "popup.html"
},*/
// 需要直接注入页面的JS
"content_scripts":
[
{
//"matches": ["http://*/*", "https://*/*"],
// "<all_urls>" 表示匹配所有地址
"matches": ["<all_urls>"],
// 多个JS按顺序注入
"js": ["js/jquery-1.8.3.js", "js/content-script.js"],
// JS的注入可以随便一点，但是CSS的注意就要千万小心了，因为一不小心就可能影响全局样式
"css": ["css/custom.css"],
// 代码注入的时间，可选值： "document_start", "document_end", or "document_idle"，最后一个表示页面空闲时，默认document_idle
"run_at": "document_start"
},
// 这里仅仅是为了演示content-script可以配置多个规则
{
"matches": ["*://*/*.png", "*://*/*.jpg", "*://*/*.gif", "*://*/*.bmp"],
"js": ["js/show-image-content-size.js"]
}
],
// 权限申请
"permissions":
[
"contextMenus", // 右键菜单
"tabs", // 标签
"notifications", // 通知
"webRequest", // web请求
"webRequestBlocking",
"storage", // 插件本地存储
"http://*/*", // 可以通过executeScript或者insertCSS访问的网站
"https://*/*" // 可以通过executeScript或者insertCSS访问的网站
],
// 普通页面能够直接访问的插件资源列表，如果不设置是无法直接访问的
"web_accessible_resources": ["js/inject.js"],
// 插件主页，这个很重要，不要浪费了这个免费广告位
"homepage_url": "https://www.baidu.com",
// 覆盖浏览器默认页面
"chrome_url_overrides":
{
// 覆盖浏览器默认的新标签页
"newtab": "newtab.html"
},
// Chrome40以前的插件配置页写法
"options_page": "options.html",
// Chrome40以后的插件配置页写法，如果2个都写，新版Chrome只认后面这一个
"options_ui":
{
"page": "options.html",
// 添加一些默认的样式，推荐使用
"chrome_style": true
},
// 向地址栏注册一个关键字以提供搜索建议，只能设置一个关键字
"omnibox": { "keyword" : "go" },
// 默认语言
"default_locale": "zh_CN",
// devtools页面入口，注意只能指向一个HTML文件，不能是JS文件
"devtools_page": "devtools.html"
}
V3的主要改变
版本号变更："manifest_version": 2
"manifest_version": 3,
background对象新增service_worker子对象key：value形式
"background":
{
"service_worker": "background.html" //key:value格式
},
web_accessible_resources 数组更改为一个详细描述所有资源的对象
"web_accessible_resources": [
{
"resources": ["js/tools.js"],
"matches": ["<all_urls>"]
}
]
主要代码分析
chrome.contextMenus.create({
id:'baidu-search',
title: "百度搜索：%s", // %s表示选中的文字
contexts: ["selection"], // 只有当选中文字时才会出现此右键菜单
onclick: function (params) {
// 注意不能使用location.href，因为location是属于background的window对象
chrome.tabs.create({
url:
"https://www.baidu.com/s?ie=utf-8&wd=" +
encodeURI(params.selectionText),
});
},
});
chrome.contextMenus.create方法创建一个右键菜单，title菜单名称，context表现方式，onclick点击事件，chrome.tabs.create打开一个新标签tab，params.selectionText为鼠标选中内容参数获取。如上创建了一个鼠标右键，添加百度搜索的功能。
不要问我百度搜索接口哪里来的，直接百度首页，f12开启开发者工具，点击network自己抓取（作为开发人员，没有人不知道吧）。
chrome.notifications.create(null, {
type: "basic",
iconUrl: "img/icon.png",
title: "翻译成功",
message: response.data.trans_result[0].dst
});
chrome.notifications.create方法调用浏览器的通知功能，通知如下：
翻译api的调用
主要是调用百度翻译的api接口，用户可以自己登录百度翻译开放平台，注册成为开发者，里面的api接口，自己可以随意调用，前提是100w词以内。就小范围使用已经是足够了哈。百度翻译接口使用文档地址
Edge上兼容性
新版的Edge和chrome有着相同的内容，所以插件可以公用。在已开发的功能总不存在兼容问题。截图如下：
结语
源码文件内容比较多，在这就不详细贴出了，可以在码云仓库上查看完整代码：gitee地址：辅助阅读源码
