# max-chrome-extension

**Repository Path**: max-lu/max-chrome-extensionm

## Basic Information

- **Project Name**: max-chrome-extension
- **Description**: chrome插件
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-07-07
- **Last Updated**: 2023-01-31

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Chrome, Chrome-extension, 插件

## README

# chrome插件开发


### manifest.json
对`manifest.json`文件各个参数的说明
- 提供类型划分
```js
{
// 必须的字段
  "name": "My Extension",
  "version": "versionString",
  "manifest_version": 2,
  // 建议提供的字段
  "description": "A plain text description",
  "icons": { ... },
  "default_locale": "en",
  // 多选一，或者都不提供
  "browser_action": {...},
  "page_action": {...},
  "theme": {...},
  "app": {...},
  // 根据需要提供
  "background": {...},
  "chrome_url_overrides": {...},
  "content_scripts": [...],
  "content_security_policy": "policyString",
  "file_browser_handlers": [...],
  "homepage_url": "http://path/to/homepage",
  "incognito": "spanning" or "split",
  "intents": {...}
  "key": "publicKey",
  "minimum_chrome_version": "versionString",
  "nacl_modules": [...],
  "offline_enabled": true,
  "omnibox": { "keyword": "aString" },
  "options_page": "aFile.html",
  "permissions": [...],
  "plugins": [...],
  "requirements": {...},
  "update_url": "http://path/to/updateInfo.xml",
  "web_accessible_resources": [...]
}  
```
```js
{
  "manifest_version": 2,
  "name": "陆",
  "version": "1.0",
  "description": "test-description",
  "permissions": [
    "https://secure.flickr.com/"
  ],
  // chrome://extensions/ 扩展应用中显示的图标
	"icons":
	{
		"48": "common/img/icon.png",
		"128": "common/img/icon.png"
	},
  // background。会一直常驻后台
	"background": {
		"scripts": ["js/background.js"],
		"persistent": true
	},
  // 浏览器顶部栏交互用
  "browser_action": {
    // 图标
		"default_icon": "common/img/icon.png",
    // 图标点开后，显示交互的html
    "default_popup": "common/html/popup.html"
  },
  // 
  "page_action": {
		"default_icon": "common/img/icon.png",
    "default_title": "Do action",
    "default_popup": "common/html/popup.html"
  },
  // 需要直接注入页面的JS，和web页面交互
	"content_scripts":
	[
		{
      // 定义哪些页面需要注入。这里是所有页面都注入
			"matches": ["<all_urls>"],
			"js": ["common/js/init.js", "modules/spiderTool/js/spiderTool.listener.js"],
			"css": [],
			// 代码注入的时间，可选值： "document_start", "document_end", or "document_idle"，最后一个表示页面空闲时，默认document_idle
			"run_at": "document_start"
		}
	],
	// 权限申请
  "permissions":
	[
		"contextMenus", // 右键菜单
		"activeTab",
		"tabs", // 标签.chrome.tabs和chrome.windows模块需要这个权限
		"notifications", // 通知
		"webRequest", // web请求
		"webRequestBlocking", // 阻塞式web请求
		"storage", // 插件本地存储
		"cookies",
		"downloads",
		"http://*/*", // 可以通过executeScript或者insertCSS访问的网站
		"https://*/*" // 可以通过executeScript或者insertCSS访问的网站
	],
  // 指定本扩展在注入的目标页面上所需使用的资源的路径
  "web_accessible_resources": [
		"common/**.*",
		"modules/**.*"
	]
}
```

### 概念

- `content script`：`在Web页面的内部执行javascript脚本`。Content scripts与它所在的应用（扩展）并不是完全没有联系，脚本可以与所在的应用（扩展）交换消息。script可以发送消息，或者背景页面发送消息script接收
- `page_action`：在地址栏内增加临时的图标
- `browser_action`：在工具栏上增加图标

### chrome
- chrome.storage.local.set({ xx: yy }, callback(){});
- chrome.tabs.executeScript
- chrome.tags.sendMessage
- chrome.browserAction
- chrome.cookies.get()
- chrome.tags.query
- chrome.downloads.download()
- chrome.devtools.network.onRequestFinished.addListener()
- chrome.extension
- chrome.extension.getURL()

### 插件结构模型
- [结构模型](https://zhuanlan.zhihu.com/p/338545648)
主要分为三个模块/组件：background、popup、content scripts（插件结构模型.jpg）
- background.js运行在不可见的background page，用来执行应用（扩展）的主要功能。可以在扩展程序页面中，点击“查看视图`背景页`”来查看里面的打印信息
- popup.js作用于弹出的气泡
- content scripts作用于匹配的页面。可以和web页面交互
- 三者之间可以通过某种方式进行通信

注：弹窗popup.html可以直接调用背景页面中的函数

#### content script
- `在Web页面的内部执行javascript脚本`
- 在一个特殊环境中运行，可以访问注入页面的DOM，但是不能访问里面任何的javascript变量和函数，对每个content script来说，就像除了自己以外再没有其他脚本运行。反过来也是，`页面里的javascript不能访问content script中的变量和函数`


### 学习地址

- http://chrome.cenchy.com/getstarted.html
- http://chrome.cenchy.com/manifest.html