# FavoritesChromePlugin

**Repository Path**: YCodeProjects/favorites-chrome-plugin

## Basic Information

- **Project Name**: FavoritesChromePlugin
- **Description**: No description available
- **Primary Language**: JavaScript
- **License**: ISC
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-01-14
- **Last Updated**: 2022-03-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# FavoritesChromePlugin

### 介绍
**以下是 Gitee 平台说明，您可以替换此简介**

企业项目请看 [https://gitee.com/enterprises](https://gitee.com/enterprises)}

### 软件架构
软件架构说明


### 安装教程
```
npm install
npm run serve
npm run build
```


### 使用说明
#### Chrome 插件基本组成部分

1.  manifest.json Chrome的入口文件，包括background、content、popup配置，访问资源及Chrome API权限配置
2.  background html/script 插件运行的主要脚本
3.  content script 除插件外，Chrome浏览器中的其他页面
4.  popup html/script Chrome浏览器工具栏插件显示的弹框及图标配置。对应【manifest.json】中的browser_action 和 page_action 配置


#### manifest.json 配置说明
1. icons：extension程序的图标，可以有一个或多个
2. browser_action与page_action：用于配置 popup 相关信息
3. background：插件运行在浏览器中的一个后台网站/脚本
4. content_scripts：插入到其他页面中的脚本
5. permissions：配置background 里所用的 chrome API
6. web_accessible_resources： 配置其他页面访问插件内指定的资源

#### 插件通信机制
1. content与background：chrome.runtime.sendMessege 和 chrome.runtime.onMessege.addListener
2. popup与background：可用content与background通信机制，或chrome.extension.getBackgroundPage().methodName()
3. popup与content：可用content与background通信机制
4. 插件iframe网站与content：postMessage 和 onmessage

#### 验证插件安装
1. 插件启动后，利用content脚本，在打开页面中动态生成 div 元素，并设置 id或class 属性。在打开页面中通过判断此 div 是否存在即可；
2. 通过利用postMessage机制检测

#### 发布及获取
1. 发布到开发者中心，并下载发布的包（此包安装是不会有安全提示）
2. Chrome扩展地址：chrome://extensions/ 

### 遇到问题
#### 加载Chrome插件相关问题
1. Cannot load extension with file or directory name _localesw. Filenames starting with "_" are reserved for use by the system.无法加载清单。
- 解决方案：以 _ 开头文件夹为Chrome保留文件夹所需，必须是特定的几个文件夹。此处应为 【_locales】
2. Catalog file is missing for locale en.无法加载清单。
- 解决方案：locale 下的国际化词条文件，必须以 messages.json 命名
3. Only one of 'background.page', 'background.scripts', and 'background.service_worker' can be specified.
- 解决方案：manifest.json 配置【background】中配置项 page/scripts/service_worker 只能配置一项
```javascript
{
	"background": {
		"page": "background.html", // page 和 scripts 只能配置一个
		"scripts": ["src/background.js"],
		"persistent": false
	}
}
```
4. The 'webRequest' API cannot be used with event pages.
- 解决方案：manifest.json 配置【background】中配置项 persistent 配置为 true
```javascript
{
	"background": {
		"page": "background.html", // page 和 scripts 只能配置一个
		"scripts": ["src/background.js"],
		"persistent": true
	}
}
```

#### 运行Chrome插件相关问题
1. Unchecked runtime.lastError: The message port closed before a response was received.
- 解决方案：消息通信过程中。发送消息后，需要生成响应消息
```javascript
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse){
  console.log('[inject] inject onMessege: ', request)

  sendResponse('[inject] tabs bg msg：') // 【添加此回应】需要回应接收到的消息

  return true;
})
```
2. Uncaught TypeError: Cannot read properties of undefined (reading 'getTree'), details：chrome.bookmarks.getTree(function(nodes){}) 此错误一般为脚本无法访问Chrome API造成
- 解决方案：manifest.json 在配置【permissions】中增加 bookmarks 
```javascript
{
	"permissions": [
		"tabs",
		"bookmarks", // 增加此Chrome API
    "storage",
    "notifications",
    "webRequest",
		"http://*/*",
		"https://*/*"
  ]
}
```
3. Uncaught EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self' blob: filesystem:"
- 解决方案：manifest.json 中配置【content_security_policy】资源请求策略
```javascript
{
	"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
}
```