# chrome辅助阅读插件开发

**Repository Path**: chengkaigu/reading-tools

## Basic Information

- **Project Name**: chrome辅助阅读插件开发
- **Description**: 一个兼容chrome与edge的浏览器插件，让你的阅读无障碍
- **Primary Language**: JavaScript
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-07-06
- **Last Updated**: 2023-07-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README



## 开发个chrome插件（edge也适用），从此阅读不再有障碍

##### 开发背景

- 这个字读啥来着，怎么就忘记了？这句话，这个梗什么意思来着？ctrl+c， 打开度娘ctrl+v一下
- 外文文献阅读障碍，这个词啥意思，一边有道，一边文献，真香。。。。
- 开发过程中，或者生活中，想给某个词定义一个英文名。

##### 效果截图

![输入图片说明](%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20230706164308.png)

##### 为什么选择chrome插件

- Chrome占有率更高，更多人用；
- 开发更简单；
- 应用场景更广泛，Firefox插件只能运行在Firefox上，而Chrome除了Chrome浏览器之外，还可以运行在所有webkit内核的国产浏览器，比如360极速浏览器、360安全浏览器、搜狗浏览器、QQ浏览器等等；
- 除此之外，Firefox浏览器也对Chrome插件的运行提供了一定的支持；



##### 官方接口文档

[开发文档地址：Chrome Developers](https://developer.chrome.com/docs/extensions/mv3/manifest/)



##### 核心文件manifest.json介绍

这是一个Chrome插件最重要也是必不可少的文件，用来配置所有和插件相关的配置，必须放在根目录。其中，`manifest_version`、`name`、`version`3个是必不可少的，`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方法调用浏览器的通知功能，通知如下：

![](C:\Users\Mao\Desktop\微信截图_20230706164308.png)

##### 翻译api的调用

主要是调用百度翻译的api接口，用户可以自己登录百度翻译开放平台，注册成为开发者，里面的api接口，自己可以随意调用，前提是100w词以内。就小范围使用已经是足够了哈。[百度翻译接口使用文档地址](http://api.fanyi.baidu.com/doc/21)


##### Edge上兼容性

新版的Edge和chrome有着相同的内容，所以插件可以公用。在已开发的功能总不存在兼容问题。截图如下：



##### 结语

源码文件内容比较多，在这就不详细贴出了，可以在码云仓库上查看完整代码：gitee地址：[辅助阅读源码](https://gitee.com/chengkaigu/reading-tools.git)