[指南] 简单制作自己的 Google 套件 (Extension)

章节连结

Google Extension 套件是一个依附在 Google Chrome 浏览器上的小工具。它本身其实就是一个简易的 JavaScript, CSS, HTML 的组合,用来存取所在/特定页面的 DOM、发送一些异步请求……等。
google chrome


Demo 套件结构

这回,我们要制作的是一个点下一个右上角的 icon,然后弹出一个视窗,上面会有一些资讯(可能需要对其他网站发出请求)的套件。那么,这个套件结构如下:

步骤

1.写下扩充功能的安装档 (manifest.json)

2.制作接口

简言之,就是编辑 popup.css, popup.html 以及加载自订的 js。这个 js 必须要是内建在你的专案套件内,不可以外联,不过 css 是可以外联的。开发时,你可以用浏览器开启 popup.html 来即时浏览修改成果。

3.加载扩充套件

在 Google Chrome 的 chrome://extensions/ 页签中,开启右上角的开发者模式,然后“加载未封装的功能”,然后选择专案的资料夹。
google-extension control panel

4.发出 API 请求

若你在套件中有要对外发出时,由于不能加载 axios 之类的套件进来,你可以改用原生的 fetch 用法。不过,这个方法有一个问题是当后端的服务器有限制 CORS (Cross-Origin Resource Sharing) 存取的时候,由于你从套件发出的请求多半是非同源的,除非服务器端对前端全部开放存取,不然浏览器是会帮你把 request 发出去,不过你是不会收到 response 的你只会收到警告讯息。

后端的服务器若是带上:Access-Control-Allow-Origin: *,那么就是任何人都可以存取并取得回传资料。

替代方案的话,若对方的服务器没有提供 jsonp 的 API,或是你要传 POST 表单之类的,那么你可以透过网络上好心人提供的工具来帮忙,像是 cors-anywhere
使用方法:https://cors-anywhere.herokuapp.com/第三方网址

5.Debug

在套件 icon 上点选右键,点选 inspect pop-up,接着你就会看到熟悉的 console。你会发现这边的环境和浏览器本身并不相同,所以变量命名等不会有冲突,不过你可以针对这个页签的 DOM 作一系列操作。
google-extension right clickdebug console

6.上架商店

上架后台页面:https://chrome.google.com/webstore/developer/dashboard

I.点选“新增商品”
google-extension upload page
II.将你的套件资料夹内的东西,压缩后上传 .zip 档(不需要档案、图片或是.gitignore之类的,就不要打包进去了)
google-extension for upload
III.上传后,填写套件的相关资讯(若你有详细的写 README.md,那么这一段会轻松很多)
IV.若你是第一次上传,那么要缴交5美元的一次性费用,最多一个帐户可以上传20个套件。
V.等待审核,快的话24小时内就会有结果,长的话就只能慢慢等了。

7.Alexa-and-similarWeb-rank

这篇文章是这个专案(Alexa-and-similarWeb-rank)的制作心得和笔记

最后成品网址:https://tinyurl.com/tsnwdrm
google-extension result


参考资料

1.Chrome Extension 开发与实作 03-官网导读:架构总览Architecture Overview
2.Chrome Extension 开发与实作 04-名词定义:架构的组成部份
3.Chrome Extension 开发与实作 05-脚本组件与扩充功能的执行阶段
4.Chrome Extension 开发与实作 06-事件脚本与背景页面
5.轻松理解 Ajax 与跨来源请求
6.使用跨域代理服务器(CORS PROXY),解决读取第三方网站资料问题﹍实作范例
7.[笔记] 从零开始制作 Chrome 套件到上架商店

按赞加入粉丝团

延伸阅读

GA浏览人气:2