01-basic 首先,我们看一个简单的demo。通过它可以修改 “https://developer.chrome.com/” 这个网站的背景色 访问这网站,默认是个白色背景,很刺眼。 演示我们的demo 那这是如何实现的呢? 讲解下manifest.json:这是一个核心文件,配置了我们所需要的权限,指明了我们的popup页面是哪个文件。
要实现的目标
- 我们的扩展只针对developer.chrome.com这个网站。所以使用的是page_action而不是browser_action。演示下这两者的区别。只有当匹配到对应规则时,page_action才生效,那如何匹配呢,使用到chrome.declarativeContent这样一个api,所以需声明权限declarativeContent
- 要修改网页背景色。为了操作网页的document,需要声明权限activeTab
- 操作网页document,我们需要使用chrome.tabs.executeScript这样一个api,它又需要chrome.tabs.query获取当前tabId,指明要操作的tab
- 支持选择其它颜色。options.html配置了几种颜色,popup.html默认了绿色,如何在popup.js获取到options.html配置的颜色呢?使用chrome.storage做媒介。所以我们需要声明权限storage。(SESSION 1)
02-injected
- 我们想让代码尽早执行,所以执行时机是document_start
- web_accessible_resources需要添加注入的脚本
- 还不够第一时间
02-injected-optimized
- 同步执行script,肯定最快
03-copy-anything
- 因为只针对百度文库,所以content_scripts的matches限制下
03-copy-anything-final
04-cross-request
- 这回content script注入我们改用
<all_urls>
,注入任意网站。顺便一提,content 这里支持注入多个(数组形式) - 因为我们要请求任意地址,所以permissions声明下权限
- 同样使用前面demo中的injectCustomJs方法,用于injected代码
- 查看通信表,得知content script脚本可以使用 chrome.runtime.sendMessage 发送消息给 background.js。而background.js则使用chrome.runtime.onMessage.addListener接收消息
- 异步消息需return true告知
- injected ---> content ---> background ---> content ---> injected
- 原请求:fetch('https://wenku.baidu.com/xpage/form/getform?id=2020_index_classification')。 跨域请求:crossFetch('https://wenku.baidu.com/xpage/form/getform?id=2020_index_classification').then(res=>console.log(res))
05-vue-force-dev
- 简单地搜索下关键字,如devtools之类的,大概翻下源码