前言
之前笔者一直想了解一些关于谷歌插件的相关知识,通过这个谷歌插件也可以更好的认识到这个谷歌的调试工具,正好最近需要进行分享,这两个星期去学习和了解了谷歌插件,然后写了这一篇文章,把本人所了解的和一些思考点写了下来。同时,也想着可以使用谷歌插件去写一些小工具,既学习了新的东西,又有一定的趣味性。当然,因为时间的原因,如果笔者对于这一块的认识有不对的地方,欢迎批评指正~
什么是谷歌插件
谷歌插件,全名谷歌浏览器扩展程序。那什么是谷歌浏览器扩展程序,官方说明如下:
扩展程序允许您为 Chrome 浏览器增加功能,而不需要深入研究本机代码。您可以使用您在网页开发中已经很熟悉的核心技术(HTML、CSS 与 JavaScript)为 Chrome 浏览器创建新的扩展程序。
有疑惑的同学会问了,为什么人家还叫谷歌插件,那这就正如鲁迅所说的那句话:世上本没有路,走的人多了,也就有路了。谷歌浏览器扩展程序本来也不是谷歌插件,谷歌插件应该是浏览器更为底层的东西,奈何叫的人太多了,所以本文也使用谷歌插件来统称谷歌浏览器扩展程序。
基本使用
下面先介绍一下谷歌插件的主要组成部分,因为目前谷歌插件使用比较普遍的版本为 2.0 版本,所有以下都是基于 2.0 版本进行使用说明,3.0 版本相较于 2.0 版本更为简便,有兴趣的同学可以点击文章末尾处的链接了解更多相关知识。
配置文件
谷歌插件的核心文件就是配置文件--manifest.json(清单)文件。其中,manifest.json 文件最基本的 Api 如下:
{
"name": "chrome extension",
"version": "1.0.0",
"manifest_version": 2,
"description": "A litlle chrome extension demo"
}
主要是包含所写谷歌插件的名称,版本,以及相关描述,其中 manifest_version 表示清单文件版本。manifest.json 作为谷歌插件的核心部分,笔者认为该文件对插件来说就相当于一个入口配置文件,开发只需要在这个文件通过配置相应的 js,调用谷歌浏览器提供的 Api,来达到完善这个插件的目的。
基本使用Api
在清单文件中还有很多 Api 就不一一列举了,下面只介绍几个笔者认为比较重要的几个 Api,通过以下几个 Api 可以使得读者对于谷歌插件的开发过程有一个大概的认识。
- browser_action
{
...
"browser_action": {
"default_icon": {
"16": "images/get_started16.png",
"32": "images/get_started32.png"
},
"default_title": "谷歌划词翻译",
"default_popup": "popup.html"
},
...
}
browser_action 可设置浏览器右上角的图标,名称。default_popup 可配置点击图标后会出现的一个小窗口,这里可以做一些临时性的操作。
- permissions
{
...
"permissions": [ "activeTab", "storage", "tabs", "contextMenus" ],
...
}
permissions 可配置谷歌插件权限申请,如 contextMenus(右键菜单), tabs(标签),storage(插件本地存储)。
- content_scripts
{
...
"content_scripts": {
"matches": ["<all_urls>"],
"css": ["content/content_script.css"],
"js": ["content/content_script.js"]
},
...
}
content-scripts,其实就是谷歌插件中向页面注入脚本的一种形式(虽然名为 script,其实还可以包括 CSS 的),借助 content-scripts 可以实现通过配置的方式轻松向指定页面注入 JS 和 CSS。
- background
{
···
"background": {
"scripts": ["background.js"],
"persistent": false
},
···
}
background 是一个常驻的页面,它的生命周期是插件中所有类型页面中最长的,它随着浏览器的打开而打开,随着浏览器的关闭而关闭,所以通常把需要一直运行的、启动就运行的、全局的代码放在 background 里面。
笔者也画了一个上面涉及到的脚本在浏览器中的分布
以上,介绍完谷歌插件清单文件基本且比较重要的一些 Api 以后,感兴趣的同学就可以开始着手写几个简单的工具,用来实现自己远大的抱负以及理想,升华自己高贵的灵魂。相应的,笔者也分享一个有意思的谷歌插件工具实现过程,通过开发这个工具也可以加深对于谷歌插件的认识。
前置条件
因为有的同学不太知道怎么开发谷歌插件,就还是把前置条件说一下。首先需要打开管理扩展程序,打开开发者模式。点击加载已解压的程序按钮即可加载本地谷歌插件,开发的时候代码如果有更新的话,需要刷新已加载插件,点击关闭后再开启,不必刷新开发页面。
谷歌划词翻译插件
笔者对于谷歌插件使用次数比较频繁的还是翻译工具,对于在网页上看到的不懂的英文单词或者句子,直接使用鼠标选中,轻松快捷的翻译出相应的中文。那么谷歌浏览器插件的翻译工具是如何实现的呢?
思考
如何去做一个划词翻译插件,首先要考虑的有以下几点:
- 如何实现翻译效果
- 如何选中我们需要的元素
- 选中元素之后如何展示划词翻译面板
- 所有的浏览器 Tab 都需要支持翻译效果
思考完上面的点后,带着这几个疑惑,笔者在下文一一解答,同时也列举一下遇到的一些点。
划词翻译面板
首先不去考虑该插件的功能,先写下划词翻译的面板的样式,所达到的效果如下:
HTML 代码如下
<div class="translate-panel show">
<header>谷歌划词翻译插件<span class="close">X</span></header>
<main>
<div class="source">
<div class="title">英文</div>
<div class="content">test</div>
</div>
<div class="result">
<div class="title">简体中文</div>
<div class="content">...</div>
</div>
</main>
</div>
将上面的样式简单的写好之后,开始考虑如何将划词翻译的面板展示在浏览器当前页面。对于谷歌浏览器来说,在网页上面去进行的交互是属于 content_scripts 的,需要引入划词翻译面板所需要的 JS 或者 CSS,去生成当前面板。
其次,在配置文件中配置 content_scripts,引入 JS 文件,动态的生成 DOM 元素。大致的思路就是通过监听到鼠标松开后,去生成翻译面板,在生成的元素上面添加 opacity 样式控制显隐,使用谷歌免费翻译 Api 进行翻译。其中代码如下所示:
// manifest.json
{
...
"content_scripts": {
"matches": ["<all_urls>"],
"css": ["content_script.css"],
"js": ["content_script.js"]
},
"permissions": [
"activeTab"
],
...
}
// content_script.js
class TranslatePanel {
createPanel = () => {
let wrapper = document.createElement('div')
wrapper.innerHTML = `
<header>谷歌划词翻译插件<span class="close">X</span></header>
<main>
<div class="source">
<div class="title">英文</div>
<div class="content">test</div>
</div>
<div class="result">
<div class="title">简体中文</div>
<div class="content">...</div>
</div>
</main>
`
wrapper.classList.add('translate-panel')
wrapper.querySelector('.close').onclick = () => {
this.wrapper.classList.remove('show')
}
document.body.appendChild(wrapper)
this.wrapper = wrapper
}
showPanel = () => {
this.wrapper.classList.add('show')
}
translateSelect = (content) => {
const source = this.wrapper.querySelector('.source .content')
const result = this.wrapper.querySelector('.result .content')
source.innerHTML = content
result.innerHTML = '翻译中...'
fetch(`https://translate.google.cn/translate_a/single?client=at&sl=en&tl=zh-CN&dt=t&q=${content}`)
.then(res => res.json())
.then(res => {
result.innerHTML = res[0][0][0]
})
}
locationPanel = (target) => {
this.wrapper.style.top = target.y + 'px'
this.wrapper.style.left = target.x + 'px'
### }
}
let panel = new TranslatePanel()
panel.createPanel()
window.onmouseup = (target) => {
// 获取选中内容
const content = window.getSelection().toString().trim()
if (!content) return
panel.locationPanel({ x: target.pageX, y: target.pageY })
panel.translateSelect(content)
panel.showPanel()
}
上面过程中,笔者使用了谷歌免费的翻译借口,但是这个接口按照目前的使用还是有一点问题,我们暂时先放下不说。那么现在来说,滑词翻译的面板就已经基本写好了。
脚本通信
划词翻译插件开发到这里,细心的同学应该发现了,每次选中单词时都会触发划词翻译功能,此时,急需一个控制翻译功能的开关,这个开关就可以放在 popup 脚本上面。具体的样式的实现就不去介绍了,主要看一下 HTML 结构。
基本效果如下
<div class="switch-wrapper">
<div class="switch-desc">是否启用划词翻译</div>
<input type="checkbox" class="switch" />
</div>
于此同时,面板和划词翻译的面板都已经有了,再考虑一下如何实现 popup 脚本与 content_script 脚本之间的通信。首先,在 popup 脚本上面,我们在打开窗口的时候需要去查询是否有存储开启划词翻译的状态,同时,当状态发生变更的时候需要将其存储,再在当前的 Tab 下面发送请求。
// popup.js
let switchWrapp = document.querySelector('.switch')
chrome.storage.sync.get(['checked'], (target) => {
if (target) {
switchWrapp.checked = target.checked
}
})
switchWrapp.onclick = (e) => {
chrome.storage.sync.set({ checked: e.target.checked })
chrome.tabs.query( {active: true, currentWindow: true }, (tabs) => {
chrome.tabs.sendMessage(tabs[0].id, { checked: e.target.checked })
})
}
上面代码中的 chrome.storage 可用于存储数据,追踪数据。storage.sync 的作用是让谷歌浏览器的数据同步,这使得在不同 Tab 页上面切换的状态也是可以同步的,同时也不用将数据保存在 background 后台页面中,storage 还有很多 Api 比如监听 storage 数据变化的 onChanged,就不一一介绍了。将开启或关闭划词翻译的状态发送后,content_script.JS 需要添加监听事件,获取到该状态后,进行关闭或开启操作。
// content_script.js
let checked = false
window.onmouseup = (target) => {
···
if (!content || !checked) return
···
}
chrome.storage.sync.get(['checked'], (target) => {
if (target) checked = target.checked
})
chrome.runtime.onMessage.addListener((target) => {
if (target) {
checked = target.checked
}
})
在开发过程中呢,发先在当前的 Tab 是可以去完成这个操作的,但是当开启了多个 Tab 的情况就会出现开启翻译却不能展示翻译面板的情况,以上笔者思考了一下,此时应该将 checked 储存起来,不应该放在 content_script 脚本当中。
// content_script.js
let panel = new TranslatePanel()
panel.createPanel()
window.onmouseup = (target) => {
// 获取选中内容
const content = window.getSelection().toString().trim()
if (!content) return
window.chrome.storage.sync.get(['checked'], (result) => {
if (result.checked) {
panel.locationPanel({ x: target.pageX, y: target.pageY })
panel.translateSelect(content)
panel.showPanel()
}
})
}
chrome.runtime.onMessage.addListener((target) => {
if (target.type == 'CHECKED') {
chrome.storage.sync.set({ checked: target.checked })
}
})
以上,popup 脚本和 content_script 脚本之间就实现了通信,翻译插件也可以通过 popup 上面的按钮,进行开启或关闭翻译功能。同理,也可以知道其他模块也是可以通过这种方式去进行通信,不同的只是其他脚本向 content_script 通信是需要使用 tabs,先查找到当前的 Tab 在发送请求。
右键直达翻译页面
当关闭划词翻译的时候,直接不能再去翻译选中内容也不是很友好,这个时候可以为点击右键的时候出现翻译菜单项。因为这部分内容需要一直存在就加在 background 中。
// backgrond.js
// 当扩展程序第一次安装、更新至新版本或 Chrome 浏览器更新至新版本时产生
chrome.runtime.onInstalled.addListener(() => {
chrome.contextMenus.create({
"id": "SELECT_TRANSLATE",
"title": "翻译 %s",
"contexts": ["selection"]
})
})
chrome.contextMenus.onClicked.addListener((target) => {
if (target.menuItemId == 'SELECT_TRANSLATE') {
chrome.tabs.create({url: `https://translate.google.cn/?sl=en&tl=zh-CN&text=${target.selectionText}&op=translate`})
}
})
跨域问题
开发过程中,有的同学也看出来了一个问题,比如说谷歌的这个翻译的 Api 需要同源的情况下才能正常调用该接口,然后就只能在谷歌翻译的页面中使用划词翻译,场面一度十分尴尬...
那么,正常来说这个划词翻译使用起来也是十分不合理的,接下来就需要解决一下这个跨域的问题。
笔者当时想要尝试的是使用 JSONP,也就是去使用嵌入脚本去进行跨域,发现还是会有一些问题,主要是谷歌的翻译的接口不支持回调函数,同时也去查阅了一些资料,发现是可以在 content_script 中通知 background,background 后台去调用谷歌翻译的 Api 是来避免这个情况的,主要因为 background 的权限非常高,几乎可以调用所有的 Chrome 扩展 Api,而且它可以无限制跨域,也就是可以跨域访问任何网站而无需要求对方设置 CORS,具体添加的代码如下:
// content_script.js
translateSelect = (content) => {
const source = this.wrapper.querySelector('.source .content')
const result = this.wrapper.querySelector('.result .content')
source.innerHTML = content
result.innerHTML = '翻译中...'
chrome.runtime.sendMessage({ type: 'QUERY_TRANSLATE', queryContent: content }, (res) => {
result.innerHTML = res[0][0][0]
})
}
// background.js
chrome.runtime.onMessage.addListener((request, sender, callBack) => {
if (request.type == 'QUERY_TRANSLATE') {
fetch(`https://translate.google.cn/translate_a/single?client=at&sl=en&tl=zh-CN&dt=t&q=${request.queryContent}`)
.then(res => res.json())
.then(res => {
callBack(res)
})
return true
}
})
background 中的发送消息的监听事件返回 true 是为了与 content_script 的消息通道保持打开,通过异步的方式发送请求。
现在想想,如果使用插件的 background 就可以去跨域去进行请求一些借口,使用不得当的话感觉还是很危险的,可以去获取其他网站的一些信息,由此可见,果然计算机行业还是师傅领进门,刑期看个人。
待完善的点
- 支持其他语言的翻译.谷歌翻译的接口有两个 Api,sl(文本翻译之前的语言) 和 tl(文本需要翻译成的语言) 可通过改变对应的值支持其他语言的翻译
- 样式完善,实现先选中图标在进行翻译
多添加一步感觉对交互更友好,不用去进行开关的操作
代码结构
介绍完了划词翻译插件,笔者原本是打算再分享一个关于谷歌 devtool 开发工具,开发一个类似于 React Developer Tools 的本地开发工具,但是由于时间也是不太够,涉及到的点比较多,同时查阅了很多的资料对于这一块的介绍也是比较的浅,所以还是决定着重于介绍划词翻译,通过划词翻译的开发使得读者也能够比较快速的认识到谷歌插件,谷歌浏览器的一些,举一反三,如果对于 devtool 工具插件开发有兴趣的同学也可以去了解一下。另外,有的同学可能会认为目前开发的效率是有一点低的,现在的话谷歌插件的开发也是可以基于 react + antd 去进行开发的,也是可以达到高效快速的去开发一个插件的效果。
结尾
在学习谷歌插件的时候,笔者遇到了一些问题,比如说文档比较少,官方文档又是英文的还经常 404,不过呢,好在谷歌浏览器有提供了很多 Api,笔者这边在写插件的时候也感觉到了很多趣味性。本篇文章还是写的比较通俗易懂,如果有什么点写的不对或着不清晰的地方,欢迎踊跃举手发言
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。