chrome插件开发-教程00（如何开发插件）

Posted 2020-10-10

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了chrome插件开发-教程00（如何开发插件）相关的知识，希望对你有一定的参考价值。

一 chrome浏览器插件的基础知识

1.认识chrome插件文件：

chrome插件的扩展名是：.crx，可以在chrome官方的应用商店下载（https://chrome.google.com/webstore/category/extensions?hl=zh-CN），从网上下载的插件安装成功后，插件的源文件会被自动删除，chrome插件的安装后的默认位置是：~/Library/Application Support/Google/Chrome/Default/Extensions/文件夹下面，想要打开这个文件夹，通常都需要通过fiddler的前往文件夹输入路劲功能，因为资源文件夹大多时候是隐藏的，需要设置才能在fiddler中看到。.crx文件实际上是一个压缩文件，解压后发现里面的内容就是js，css，html等web文件和图标以及manifest文件，应用（扩展）可以与Web页面交互，或者通过content script或cross-origin XMLHttpRequests与服务器交互。应用（扩展）还可以访问浏览器提供的内部功能，例如标签或书签等。插件解压后的文件列表如下图：

技术分享

2.chrome插件分类：

chrome插件分为两种：一种是出现在浏览器工具栏中的Browser Actions，另一种就是出现在地址栏中的Page Actions，这两者的区别是：BA插件的功能对所有的页面都可以使用，但是PA插件只会对一些特定的页面地址才会生效的插件，所以它对于不生效的页面是隐藏不显示的。

3. 动手开发一个很很简单的demo

a. 新建一个文件夹，然后在该文件夹下面增加一个manifest.json文件，文件内容如下：

{
	"name": "myfirstExtension",
	"version": "0.0.1",
	"manifest_version": 2,
	"description": "a extension demo",
	"browser_action": {
		"default_icon": "48x48.png",
		"default_title": "demo title",
		"default_popup": "popup.html"
	}
}

其中name代表应用程序名，version代表版本号，description代表功能描述。这些在安装扩展后就能看到，browser_action代表工具栏扩展，它会定义图标地址、标题（也就是鼠标悬停提示）和默认的popup页面。我们这里定义的popup页面为popup.html。

b. 接下来开始定义popup.html显示，它不需要使用<html>、<head>和<body>标签，可以直接写上样式、脚本和html。我们的popup.html源码为：

<meta charset="utf-8" />
<style>
*{margin: 0; padding: 0;}
.main{padding: 50px;background-color: #ccc; color:green;}
.content{color: red; line-height: 30px;font-size: 22px;}
</style>
<div class="main">
	<h1>女神高圆圆哪里去了</div>
	<div class="content">好好撸代码，高圆圆嫁人了</div>
	<img src="gyy.jpeg" />
</div>

c. 把需要的静态资源添加到该目录下面，准备好之后打开浏览器，然后在地址栏输入：chrome://extensions 进入chrome的扩展页面，点击页面上的“加载已解压的扩展程序..”，然后选择我们的文件目录，然后ok了，浏览器右上角的工具栏就会出现插件图标，点击就打开了插件。

4.插件配置文件详解

插件里面有个重要的配置文件就是manifest.json配置文件，这里面配置了插件的类型、资源和功能逻辑的入口等，具体看看这个文件长什么样：

//这个json是用来给chrome读取的，json左右两边都要加""
{
    "manifest_version": 2,  // 这个当前基本就是写死的了，指定manifest的版本
    "name": "My Extension", // 插件的名称，和下面的version，description都能在chrome://extension设置中看到
    "version": "versionString",
    "default_locale": "en",
    "description": "A plain text description",
    "icons": { // 在插件商店和安装目录中看到的图标
        "16": "images/icon16.png",
        "48": "images/icon48.png",
        "128": "images/icon128.png"
    },
	// 和下面的page_action只能二选一
    "browser_action": {
        "default_icon": {  // 显示在浏览器右侧工具栏中的图片，大部分显示的都是48对应的图片
            "19": "images/icon19.png",
            "38": "images/icon38.png"
        },
        "default_title": "Extension Title",   // 鼠标悬停在插件图标上显示的文案
        "default_popup": "popup.html"         // 点击插件图标弹出的页面
    },
    "page_action": {
        "default_icon": { // 显示在浏览器地址栏右侧的图标 其余的信息同上，但是这个图标只会在生效的页面中显示，否则是隐藏的
            "19": "images/icon19.png",
            "38": "images/icon38.png"
        },
        "default_title": "Extension Title",
        "default_popup": "popup.html"
    },
     //需要数据保存程序中，如果当前用户关闭popup，就需要Background Pages来进行相应的操作
    "background": {
        "scripts": ["background.js"]
    },
     //需要和网页交互，那么他就需要一个内容脚本(Content scripts)，内容脚本常由javascript编写，会在网页载入完成后调用
    "content_scripts": [
        {
            "matches": ["http://www.google.com/*"],
            "css": ["mystyles.css"],
            "js": ["jquery.js", "myscript.js"]
        }
    ],
　　//选项页面
    "options_page": "options.html",
    //跨域权限许可，权限
    "permissions": [
        "*://www.google.com/*"
    ],
    //web可访问资源
    "web_accessible_resources": [
        "images/*.png"
    ]
}

5.chrome插件结构介绍

先上图：

技术分享

manifest作为插件的配置文件，也可以看成是插件的入口文件；

popup：就是插件弹出页面的主要显示的内容，相当于插件的view视图层，运行环境如上图的绿色背景区域；他虽然和background script同处插件运行环境，但是他们直接也是不能直接访问的，需要特定的方法获取；

background script：chrome开辟的一块独立运行环境，在后台运行插件的逻辑，这个不是必须的，如果你的插件设计到在页面一直运行，就算插件关闭后也要运行的，才需要使用这个（pages action需要这个）；

content script ：这个就是大多数插件的数据提供者，它是我们注入到页面中的脚本，插件允许我们向当前打开的网页中注入代码，这个功能是在太强大了，也太危险了，让我们可以干预页面上的显示内容，窃取页面信息等等；不过浏览器对其增加了一些限制，能直接访问的只是页面的dom，原页面上的js是访问不了的，反之，页面的js也不能访问content script中的js，不会和原页面的js发生冲突，因为浏览器会专门开辟一套content script运行的环境，上图中浅红色背景的区块代表content的，浅蓝色背景的代表页面原有的js运行环境。content script 是在网页加载完了和页面脚本执行完了运行，但是这个是可以改变的，具体可以参考https://developer.chrome.com/extensions/content_scripts.html ，查看其中的“run_at”。

二、插件操作页面资源

1.插件popup环境操作页面dom

通过上面介绍我们知道插件操作原页面DOM必须通过content script，所以我们需要首先把content script插入到页面里面去，方法如下：

// 具体意思就是把名字为content_script的js文件插入到浏览器页面的content script环境中去
// 这行代码若要生效必须要在manifest中的permissions中添加tabs；
// 此方法的第一个参数是tabid，我们其实就想向当前激活（显示）的页面注入脚本，所以，我们第一个参数传null，这样就会用默认的值（active tab），但是要这个生效需要增加权限
// 就像你猜到的，在manifest的permissions中添加：activeTab
// 接口文档：https://developer.chrome.com/extensions/tabs#method-executeScript
// chrome.tabs的值有哪些呢，查阅：https://developer.chrome.com/extensions/tabs
// 执行content script文件 
chrome.tabs.executeScript(null, {file: "content_script.js"}); 
 
// 接听content script传过来的数据
chrome.extension.onRequest.addListener(function(request, sender, senderResponse) {
    if(request){
  		new PerformanceData(request);
  	}
  });

2.操作页面dom的content script文件

var msg = {
	type: "aaaa",
	data: "bbbb"
}
chrome.extension.sendRequest(msg, function (response) {
     console.dir(response);
});

就是这么简单，到此浏览器插件的骨骼就完成，剩下的就是你根据自己想获取页面那些数据，以及对这些数据做些怎么样的处理等等，进一步来丰富自己的组件。

以上是关于chrome插件开发-教程00（如何开发插件）的主要内容，如果未能解决你的问题，请参考以下文章

Eclipse经典开发教程插件安装

Revit 2021插件开发入门教程

[Jenkins 新插件] 兼容阿里开发手册 (P3C) 的火线插件安装使用教程

idea插件开发从0入门idea插件开发，idea插件开发教程，如何开发idea插件

融云微课堂第五讲 | 基于原生代码开发 Flutter 插件

如何开发一个WordPress插件