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
}

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

console.log("hello world")

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
}

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)
})

补充

安装开发专用的Chrome

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

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

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

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

chrome的版本

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

如何选择

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

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

windows用户

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

mac用户

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

问答

第二课

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