谷歌插件使用&开发

谷歌插件

谷歌浏览器扩展程序：扩展是 Web 平台中使用的HTML、CSS、JavaScript、图像和其他文件的压缩包。可以修改用户浏览并与之交互中的web内容，它们还可以扩展和更改浏览器本身的行为。

开发核心

• api 文档：link

插件主要是根据包内的manifest.json文件来进行解析加载的

{
  "icons": { // chrome://extensions/中展示的插件icon
    "16": "icon16.plasmo.9f44d99c.png",
    "32": "icon32.plasmo.83dbbbab.png",
    "48": "icon48.plasmo.a78c509e.png",
    "64": "icon64.plasmo.15206795.png",
    "128": "icon128.plasmo.c11f39af.png"
  },
  "manifest_version": 3, // 插件版本
  "action": { // 插件行为
    "default_icon": { // 插件启动后右上角icon
      "16": "icon16.plasmo.9f44d99c.png",
      "32": "icon32.plasmo.83dbbbab.png",
      "48": "icon48.plasmo.a78c509e.png",
      "64": "icon64.plasmo.15206795.png",
      "128": "icon128.plasmo.c11f39af.png"
    },
    "default_popup": "popup.html"// 插件启动后右上角icon点击弹出层
  },
  "version": "0.0.0",// 插件版本
  "author": "Plasmo Corp. ", // 作者
  "name": "DEV | With vue", // 名称
  "description": "A basic Plasmo extension.", // 描述
  "permissions": ["storage", "tabs"], // 权限
  "options_ui": { "page": "options.html", "open_in_tab": true }, // 选项
  "chrome_url_overrides": { "newtab": "newtab.html" }, // newtab重载
  "host_permissions": ["https://*/*"], // 权限适用路径
  "content_security_policy": { // 内容安全策略  制定了一些策略的加载
    "extension_pages": "script-src 'self' http://localhost;object-src 'self';"
  },
  "content_scripts": [ // 内容脚本 主要更改匹配页面
  {
    "matches": ["*://*.mozilla.org/*"],
    "js": ["borderify.js"]
  }
],
  "background": { "service_worker": "plasmo-default-background.686ba280.js" },// 浏览器后台一直运行的js
  "web_accessible_resources": [  // 与扩展程序一起打包的js资源
    { "matches": [""], "resources": ["__plasmo_hmr_proxy__"] }
  ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

各脚本通信

• 参考文档1:link
• 参考文档2:link

不同的脚本对浏览器的能够调用的api也不一样。

• content js 可以访问runtime extension等部分权限，可以访问dom，不可以跨域
• popup js 可以访问大部分脚本除了devtools中，不可访问dom，可以直接跨域
• background js 可以访问大部分脚本除了devtools中，不可访问dom，可以直接跨域

** 这三个主要脚本之间可以互相通信**

background 和 popup 通信

一个插件只有一个backgound js 但是每个开启一个tab都有一个popupjs

• backgound
  传递消息： chrome.extension.getViews
• popup
  传递消息：chrome.extension.getBackgroundPage

** background **

const pups = chrome.extension.getViews({type:'popup'})||[] ;// getViews
export function getPopupInfo(name){
    console.log('得到popup信息')
    console.log('name',name)
    console.log('popup',pups);// bg 对popup通信
}
1
2
3
4
5
6

** popup **

const bg = chrome.extension.getBackgroundPage()
function sendBg() {
  // popup 给 bg通信
  bg.getPopupInfo("测试")
}
1
2
3
4
5

popup 与content 通信

• content
  1 发送消息 chrome.runtime.sendMessage
  2 接受消息 chrome.runtime.onMessage.addListener
• popup
  1 发送消息 chrome.tabs.sendMessage 需 chrome.tabs.query获取到tabid
  2 接受消息 chrome.runtime.onMessage.addListener

content

// content 发送给popup
export const sendPopup = ()=>{
chrome.runtime.sendMessage({info:'我是content'},(msg)=>{
    console.log('答复',msg)
})
}

// content 接收popup
chrome.runtime.onMessage.addListener((req,sender,senRes)=>{
    console.log(req.info);
    senRes('content收到')
    
})
1
2
3
4
5
6
7
8
9
10
11
12
13

** popup **

// 接收content
function receivedContent() {
  chrome.runtime.onMessage.addListener((req, send, sendRes) => {
    console.log("收到", req.info)
    sendRes("popup已经收到")
  })
}

// 发送content
function sendContent() {
  chrome.tabs.query(
    {
      active: true,
      currentWindow: true
    },
    (tabs) => {
      chrome.tabs.sendMessage(tabs[0].id, { info: "popup消息" }, (msg) => {
        console.log("答复", msg)
      })
    }
  )
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

content 与background 通信

与content 与 popup通信类似

• content
  1 发送消息 chrome.runtime.sendMessage
  2 接受消息 chrome.runtime.onMessage.addListener
• backgound
  1 发送消息 chrome.tabs.sendMessage 需 chrome.tabs.query获取到tabid
  2 接受消息 chrome.runtime.onMessage.addListener

开发工具plasmo

• 官网:link
• git: link
• 参考文档:link
• plasmo模板:link

具体使用

基本命令

• 创建项目
  npm create plasmo（基础）
  npm create plasmo – --with-vue（某个demo版本的）
• 运行
  plasmo dev
• 打包
  plasmo build

更改配置项

• 更改生成后的manifest，需在package.json文件中的manifest选项配置

  "manifest": {
    "host_permissions": [
      "https://*/*"
    ],
    "permissions": [
      "tabs"
    ]
  }
1
2
3
4
5
6
7
8

• 需要的js文件，在根目录建立content.ts, popup.vue,background.ts
  plasmo 会根据文件名自动引入build后的 配置文件中
  
  其中contentjs 比较特殊 需要再content文件中在进行一个config的配置

export const config: PlasmoContentScript = {
  matches: ["https://www.plasmo.com/*"]
}
1
2
3

• plasmo提供了一系列功能，如可以@plasmohq/storage进行存贮

import { Storage } from "@plasmohq/storage"
storage.get("listRef")
storage.set("listRef", listRef.value)
1
2
3