chrome浏览器扩展应用开发之旅(一)

本文同时发布于知乎专栏:前端指南
转载需提前联系作者,未经允许不得转载。

在接下来的一段时间内,我会在知乎专栏内陆续分享关于chrome插件的开发以及其他关于前端好玩有趣的东西。希望大家持续关注。
今天的主题是教大家开发一个简单的chrome浏览器插件。

什么是chrome浏览器插件?

chrome浏览器插件说白了就是一个用html、javascript、css组成的一个webapp;相比于通常的app,chrome插件除了普通js的功能外,还可以调用浏览器层面的api,包括书签、历史记录等。

详细了解去google开发者官网:https://developer.chrome.com/...

go!开发

老规矩,先给大家看一下最简单项目的目录结构

简单介绍一下:

  • html:存放html页面

  • image:存放插件图标

  • script:存放js文件

  • maniifest.json:一些关于插件的元数据,作为chrome入口文件

关于manifest更详细的信息,可以访问 Manifest File Format documentation

下面我把构成最简单chrome插件的最简单代码贴上来:

demo01.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>测试</title>
</head>
<body>
  <h2>go</h2>
</body>
</html>

demo01.js

(function(){
    console.log('插件已经运行!');
})();

maniifest.json

{
  "name": "go",
  "version": "0.0.1",
  "manifest_version": 2,
  // 描述
  "description": "my first chrome plug",

  // 浏览器action
  "browser_action": {
    "default_icon": "image/icon.png",
    "default_popup": "html/demo01.html"
  },

  // 脚本引入
  "content_scripts": [
    {
      "js": ["script/demo01.js"],
      // 匹配规则,在什么情况下使用该脚本
      "matches": [
        "http://*/*",
        "https://*/*"
      ],
      // 什么情况下运行【文档加载开始】
      "run_at": "document_start"
    }
  ],
  // 应用协议页面
  "permissions": [
    "http://*/*",
    "https://*/*"
  ]
}

我们这个插件最后的效果就是,点击插件之后会显示一个h2的“go”文字框,js里面那段立即执行函数会在控制台打印出 “插件已经运行!”,最后的maniifest.json也已经写好注释,基本上都是见名知意。

go!安装运行

现在基本上已经大功告成了,一个最简单的chrome插件就已经完成了,是真的很简单吧。

现在把我们的第一个插件安装一下,在chrome浏览器中输入chrome://extensions,这时候会进入chrome扩展插件页面,如下:
图片描述

在安装之前需要勾选上开发者模式,然后点击左上角"加载已解压的扩展程序",选择项目的根目录,我的根目录是chrome插件,所以直接选择该目录,chrome就可以根据maniifest.json的元数据对你的插件进行初始化了。

当然你也可以把刚刚我们做的项目打包,我们暂时不讨论这个问题。

好了,到目前为止,我们的插件已经可以正常工作了,来看看效果吧!
图片描述

是不是,我们的的go已经显示出来啦!说明demo01.html已经正常工作了,那么我们再测试一下demo01.js能不能正常工作,我们随便打开一个网页,Windows下F12打开控制台,可以看到我们打印的文字已经成功显示出来了。
图片描述

第一篇之结束语

相信不少同学在看完了我们开发之旅的第一篇文章之后,对chrome插件开发已经不陌生了,甚至已经觉得很简单了,那么请呵呵的笑一下,因为他确实简单,也确实不简单。插件这个东西难点不在技术,而在好的创意,插件是工具,工具就是用来解决问题的。

如果你跟着我的文章把目录和文件都建好了,根据流程一步一步的做下去,那么你的第一个插件也应该可以成功运行了,当然如果中间还有一些小的问题,我会根据文后评论区同学们的意见在第二篇的时候给大家详细解答,并且下一篇文章chrom浏览器插件开发之旅(二)会给大家更深一点的介绍chrome插件。

后面的几节课程会陆续开发几个新奇有意思的chrome插件,大家拭目以待吧!

阅读 2.5k

推荐阅读
前端指南
用户专栏

专注前端布道,交流请到180251611

28 人关注
11 篇文章
专栏主页