Chrome 扩展的开发实战#

tags: 学习

前言#

本课的目的#

使大家学会最基础的 Chrome 扩展开发

理念#

以实战为主，概念为辅

本来我是想按部就班，条条框框的一步一步从概念，特点，等等讲起。左思右想觉得这样未免太过枯燥，如果大家失去了兴趣，讲得再有条理也是枉然。所以还是结合实战，能做出东西才是王道。

上课形式#

• 讲解部分：我讲大家听
• 实战部分：我做一步，大家做一步，如有问题，当场解决，然后下一步

预想实战部分会较多，有条件的希望带好笔记本电脑，一起操作。

课件#

我会公布上课资料的 markdown 版本在 gist 上，方便大家查阅。

课程安排#

不定时，看我准备上课内容的进度而定。但有课会提前 1-2 周通知，不会仓促举行。

问答#

不限于上课时段，平时只要有空，到位子上来问也是欢迎的。

第一课#

大家有什么用的好的扩展介绍吗？#

介绍几款个人觉得好用的扩展#

Sexy Undo Close Tab#

商店地址

功能#

记录关闭过的 tab，以便日后快速查找恢复。

OneTab Plus#

商店地址

功能#

把 tab 打包成 tab 组，以后可以快速打开这个组。

Clipboard History Pro#

商店地址

延伸介绍（有兴趣有额外精力的）#

tampermonkey#

商店地址

官网

功能#

使用已经开发好的脚本

简介#

普通的扩展都是固定的功能，而 tampermonkey 却可以动态的加载别人写好的脚本
。可谓灵活多变，随心所欲。而且很多都是神作，有着不可思议的创意和功能。

优点#

tampermonkey 最大的特点就是跨平台，它在各个浏览器中都有发布，chrome, safari, firefox, opera, edge, dolphin, uc browser 甚至在 Android 上也能使用。

缺点#

如果可以称它为缺点的话，使用门槛稍高是我觉得唯一的不利因素。对于一个普通用户来说，如果从来没听说过 tampermonkey 的话，第一次听别人介绍你安装脚本，就必须先安装扩展，再去找脚本，步骤稍微一多便阻挡了很多用户。而如果你是老用户的话，就不会产生上述问题，遇到好用的脚本时，只会有相见恨晚的感觉。

举例介绍一款 tampermonkey 脚本#

豆瓣资源下载大师

开发准备#

编辑器#

工欲善其事，必先利其器。我们需要一款好用的编辑器。

我们需要编辑器最好具备以下功能：

• 可以打开文件夹（树状文件结构视图显示文件夹）
• 关键字高亮

没有以上功能的，不推荐使用。真的不方便。

另外，我不反对使用 IDE 集成编辑环境，但一般就来说我们的工作比较轻量级，以下 2 款可能是最佳选择。

vscode#

强力推荐

下载地址：https://code.visualstudio.com/

SublimeText3#

推荐

下载地址：https://www.sublimetext.com/3

文档#

chrome extention#

主要是看官方的文档，最新，最权威

官方介绍

API 查询

看不懂英文没关系，有中文的山寨文档，更新上可能跟不上，但大致能看。

中文文档

网页基础知识文档#

因为我们可能需要随时查询 html javascript css 等知识，以下网站备选，第一个英文的，二三都是中文的。

www.w3schools.com

www.w3school.com.cn

www.w3cschool.cn

实战 1：在 console 中打印 hello world#

步骤#

step1：创建专用的空目录#

step2：在此目录下创建空文件 manifest.json 并键入以下内容#

{
    "name": "print helloworld in console",
    "version": "1.0",
    "description": "chrome extention example 1",
    "background": {
        "scripts": ["background.js"]
    },
    "manifest_version": 2
}Copy

step3: 根目录下创建 background.js 并键入以下内容#

console.log("hello world")Copy

step4：将文件夹导入到 Chrome 内#

• 打开 chrome 中的扩展程序
• 打开开发模式
• 加载已解压的扩展程序
• 选定刚才创建的文件夹
• 看到新扩展被导入了

step5：打开扩展的背景页面，确认输出内容#

• 点击背景页，看到【hello world】输出了

  讲解#

• manifest.json 是整个扩展的总说明书
• background 中申明的 js 会在初次加载扩展时运行一次
• js 中的 console.log () 方法，将来是我们的重要调试手段

实战 2：用新 Tab 打开一个网页#

{
    "name": "print helloworld in console",
    "version": "1.0",
    "description": "chrome extention example 1",
    "background": {
        "scripts": ["background.js"]
    },
    "permissions": [
        "tabs"
    ],
    "manifest_version": 2
}Copy

let pageToBeOpen = {
    url: "https://www.google.com/doodles/rampo-edogawas-birthday",
}

chrome.tabs.create(pageToBeOpen, function (tab) {
    console.log("the new tab is:")
    console.log(tab)
})Copy

补充#

安装开发专用的 Chrome#

这只是一个建议，并非必须。

在扩展的开发过程中，有可能会产生一些不便的问题。例如

• 相同网站不同账号间切换，需要反复 login，logout。
• 扩展产生的效果，影响正常作业。

为了不搞乱现在正在使用的 chrome，可以安装别的 chrome 版本。这个 2 个版本间相互独立，不会影响对方。

chrome 的版本#

• 正式版
• beta 版
• 开发版
• canary 版

如何选择#

越往下进度越快，越是超前版本，但稳定性也是递减，越不怕折腾的人选越下方。

另外可以安装开源的 chromium，其版本速度和 canary 相当，可能稍慢。

windows 用户#

可以安装以上任意两个版本，都不会影响对方

mac 用户#

正式版，beta 版，开发版，同时只能启动一种。canary 和 Chromium 则和别的版本独立。
即（正式版，beta 版，开发版）三选一。（canary 和 Chromium）二选一或都装。

问答#

第二课#

本作品采用《CC 协议》，转载必须注明作者和本文链接