目前项目，使用需要对需求方电脑的内网页面做自动化操作：

• 刷新列表
• 进入详情
• 操作表单字段

原来的技术栈是：

• 安卓，利用无障碍服务实现app自动模拟操作
• pc，利用 ui-bot 完成pc网页自动模拟操作

我计划使用 chrome 扩展 来替代完成pc自动化脚本。

注意： Chrome Extension 最新的版本是 v3，下面的说明默认从 v3 直接开始。
请注意 Chrome88 支持 v3 ，并且 v3 相比 v2 有一些不兼容改动，因此看经验总结时候需要关注版本号。

基本概念

chrome extension 可以由下面的技术组成：

• background scripts 后台脚本
• content scripts 内容脚本
• options page 配置页面
• UI elements 操作页面
• manifest.json 清单文件

manifest.json

相当于 package.json ，扩展的相关配置。

在 chrome 扩展里，打开开发者模式，将文件夹拖入就可以。

background

不兼容更新， service_worker 替换了 background 。 如果看到旧版教程，这里api不一致。

在 manifest.json 中设定 background 里的值。

后台脚本权限较高，可以访问到全局变量 chrome 里的内容。

比如官方案例中提到的 chrome.runtime.onInstalled 事件。

permissions

在 manifest.json 中设定值，用来管理权限，保护隐私。

比如官方案例中用到了 chrome.storage.sync.set({}) ，这就需要用到 storage 权限。

这个时候我们重新看官方案例中提供的代码

let color = '#3aa757';
chrome.runtime.onInstalled.addListener(() => {
  chrome.storage.sync.set({ color });
  console.log('Default background color set to %cgreen', `color: ${color}`);
});

后台脚本调用 chrome.runtime 里的 onInstalled ，把变量存入了 stroage 里，并且已经主动声明了需要存储权限。

popup 操作页面

在 action.default_popup:'popup.html' ，设定了默认的UI操作页面。

在指定的页面中设定文件路径。在 popup 中的js脚本依然可以访问 chrome.storage.sync.get('color', ()=>{}) 来读取存储的值。

官方案例中，使用了 存储storage，激活标签activeTab，脚本注入scripting 来完成：

• 后台脚本存储默认值
• 用户触发脚本，读取当前激活页面，读取存储值，注入js，让页面变绿

统一的 action

之前v2 中的 browser_action 和 page_action 都统一成了 action ，比如上一章节提到的 action.default_popup 就统一收起来了。

可使用的api

• chrome
  • storage 操作存储内容
    • sync.get
    • sync.set
  • runtime
    • onInstalled 安装完成事件
  • tabs 依赖 permission:['activeTab']
    • query({active:true, currentWindows:true}) 获取当前激活的 tab
  • scritpting 依赖 permission:['scripting']
    • executeScript 指定tab指定回调，注入脚本
  • action
    • onClicked

chrome.accessibilityFeatures

作用不大

chrome.action

控制chrome右侧的图标功能，比如下图的这些按钮。

• icon可以动态改 action.setIcon()
• title 可以动态改 action.setTitle()
• 可以设置badge，也就是角标， action.setBadgeBackgroundColor() 和 action.setBadgeText() ，具体color可以是rgba或者 hex
• popup尺寸大小自动调整大小，不小于 2525，不大于 800600，也可以动态修改 action.setPopup()

-1 参考资料