Chrome插件开发和面向初学者的开发技巧

最新推荐文章于 2024-04-21 23:38:23 发布

bananalone

最新推荐文章于 2024-04-21 23:38:23 发布

阅读量461

点赞数 1

分类专栏： Chrome插件开发文章标签： javascript chrome devtools chrome 前端

本文链接：https://blog.csdn.net/bananalone/article/details/106087884

版权

Chrome插件开发专栏收录该内容

1 篇文章 0 订阅

订阅专栏

注：本篇大量摘自360团队翻译的Chrome插件开发官方文档

Chrome插件开发和面向初学者的开发技巧

1 概述
2 技巧
- 2.1 快速定位DOM节点
3 参考链接

1 概述

1.1 基础

一个Chrome插件其实是压缩在一起的一组文件，包括HTML、CSS、JavaScript脚本、图片文件及其它任何需要的文件。插件本质上来说就是web页面，可以使用浏览器提供的API。

1.2 文件

每个应用（扩展）都应该包含下面的文件：

一个manifest文件
一个或多个HTML文件（除非这个应用是一个皮肤）
_{个人认为即使应用不是皮肤，HTML文件也不是必须的}
可选的一个或多个JavaScript文件
可选的任何需要的其他文件，例如图片

在开发应用（扩展）时，需要把这些文件都放到同一个目录下。发布应用（扩展）时，这个目录全部打包到一个应用（扩展）名是 .crx 的压缩文件中。如果使用谷歌浏览器应用开放平台或Chrome Developer Dashboard上传应用（扩展），可以自动生成 .crx 文件。

1.2.1 清单文件（manifest.json）

每一个扩展、可安装的WebApp、皮肤，都有一个JSON格式的manifest文件，叫manifest.json，里面提供了重要的信息。

字段说明：

{
// 必须的字段
  "name": "My Extension",
  "version": "versionString",
  "manifest_version": 2,
  // 建议提供的字段
  "description": "A plain text description",
  "icons": { ... },
  "default_locale": "en",
  // 多选一，或者都不提供
  "browser_action": {...},
  "page_action": {...},
  "theme": {...},
  "app": {...},
  // 根据需要提供
  "background": {...},
  "chrome_url_overrides": {...},
  "content_scripts": [...],
  "content_security_policy": "policyString",
  "file_browser_handlers": [...],
  "homepage_url": "http://path/to/homepage",
  "incognito": "spanning" or "split",
  "intents": {...}
  "key": "publicKey",
  "minimum_chrome_version": "versionString",
  "nacl_modules": [...],
  "offline_enabled": true,
  "omnibox": { "keyword": "aString" },
  "options_page": "aFile.html",
  "permissions": [...],
  "plugins": [...],
  "requirements": {...},
  "update_url": "http://path/to/updateInfo.xml",
  "web_accessible_resources": [...]
}

这里只介绍几个我认为很有用的字段，具体参考：Manifest文件

name
用来标识扩展的简短纯文本。这个文字将出现在安装对话框，扩展管理界面，和store里面。你可以指定一个本地相关的字符串为这个字段
version
扩展的版本用一个到4个数字来表示，中间用点隔开。这些数字有些规则：必须在0到65535之间，非零数字不能0开头。合法的版本字符串如：“version”: “1”，“version”: “1.0”，“version”: “2.10.2”，“version”: “3.1.2.4567”。
manifest_version
用整数表示manifest文件自身格式的版本号。从Chrome 18开始，开发者应该（不是必须，但是2012年底左右就必须了）指定版本号为2（没有引号）。
description
描述扩展的一段字符串（不能是html或者其他格式，不能超过132个字符）。
icons
一个或者多个图标来表示扩展，app，和皮肤。
content_scripts
使用 content_scripts 字段，一个扩展可以向一个页面注入多个content_script脚本；每个content script脚本可以包括多个javascript脚本和css文件。

1.2.2 内容脚本（Content Scripts）

Content scripts是在Web页面内运行的javascript脚本。通过使用标准的DOM，它们可以获取浏览器所访问页面的详细信息，并可以修改这些信息。

下面是content scipt可以做的一些事情范例：

从页面中找到没有写成超链接形式的url，并将它们转成超链接。
放大页面字体使文字更清晰
找到并处理DOM中的microformat

当然，content scripts也有一些限制，它们不能做的事情包括：

不能使用除了chrome.extension之外的chrome.* 的接口
不能访问它所在扩展中定义的函数和变量
不能访问web页面或其它content script中定义的函数和变量
不能做cross-site XMLHttpRequests

这些限制其实并不像看上去那么糟糕。Content scripts 可以使用messages机制与它所在的扩展通信，来间接使用chrome.*接口，或访问扩展数据。Content scripts还可以通过共享的DOM来与web页面通信。
如果content scipt的代码总是需要注入，可以在extension manifest中的 content_scipt字段注册它：

{
  "name": "My extension",
  ...
  "content_scripts": [
    {
      "matches": ["http://www.google.com/*"],
      "css": ["mystyles.css"],
      "js": ["jquery.js", "myscript.js"]
    }
  ],
  ...
}

如果只是在某些情况下需要注入，可以使用permission字段:

{
  "name": "My extension",
  ...
  "permissions": [
    "tabs", "http://www.google.com/*"
  ],
  ...
}

字段：

matches：必须。使用正则表达式定义哪些页面需要注入content script。匹配所有页面可以使用"<all_urls>"。
css：可选。需要向匹配页面中注入的CSS文件。这些文件将在页面的DOM树创建和显示之前，按照定义的顺序依次注入。
js：可选。需要向页面中注入的javascript文件，按定义顺序注入。
run_at：可选。控制content script注入的时机。可以是document_start， document_end或者document_idle。缺省时是document_idle。具体参考：内容脚本。

1.2.3 引用文件

任何需要的文件都可以放到应用（扩展）中。
可以像在普通的HTML文件中那样使用相对地址来引用一个文件。

<img src="images/myimage.png">

1.3 架构

1.3.1 基本架构

绝大多数应用（扩展）都包含一个背景页面(background page)，用来执行应用（扩展）的主要功能。
在这里插入图片描述
上图显示了安装了两个应用（扩展）的浏览器。两个应用（扩展）分别是黄色图标代表的browser action和蓝色图标代表的page action。在background.html文件里定义了browser action和javascript代码。在两个窗口里browser action都可以工作。

1.3.2 页面

背景页面并不是应用（扩展）中唯一的页面。例如，一个browser action可以包含一个弹窗(popup)，而弹窗就是用html页面实现的。应用（扩展）还可以使用chrome.tabs.create()或者window.open()来显示内部的HTML文件。

应用（扩展）里面的HTML页面可以互相访问各自DOM树中的全部元素，或者互相调用其中的函数。

下图显示了一个browser action的弹窗的架构。弹窗的内容是由HTML文件（popup.html）定义的web页面。它不必复制背景页面(background.html)里的代码,因为它可以直接调用背景页面中的函数。
在这里插入图片描述

1.3.3 Content scripts

如果一个应用（扩展）需要与web页面交互，那么就需要使用一个content script。Content script脚本是指能够在浏览器已经加载的页面内部运行的javascript脚本。可以将content script看作是网页的一部分，而不是它所在的应用（扩展）的一部分。

Content script可以获得浏览器所访问的web页面的详细信息，并可以对页面做出修改。下图显示了一个content script可以读取并修改当前页面的DOM树。但是它并不能修改它所在应用（扩展）的背景页面的DOM树。
在这里插入图片描述
Content script与它所在的应用（扩展）并不是完全没有联系。一个content script脚本可以与所在的应用（扩展）交换消息，如下图所示。例如，当一个content script从页面中发现一个RSS种子时，它可以发送一条消息。或者由背景页面发送一条消息，要求content script修改一个网页的内容。
在这里插入图片描述

1.4 加载到Chrome

可以在开发人员模式中将包含清单文件的目录作为扩展名添加。

导航到chrome://extensions打开扩展管理页面。扩展管理页面也可以通过单击Chrome菜单打开，将鼠标悬停在更多工具上，然后选择扩展。
通过单击开发人员模式旁边的切换开关启用开发人员模式。
单击加载包按钮并选择扩展目录。

已成功安装扩展。由于清单中没有包含图标，因此将为扩展创建通用工具栏图标。

2 技巧

2.1 快速定位DOM节点

在想要查看的DOM节点上左键选择检查（inspect）。
比如我想知道必应搜索按钮在DOM中的位置：
在这里插入图片描述

3 参考链接

1. Chrome插件开发官方文档
 2. Chrome插件开发中文非官方文档（360团队翻译）
3.【干货】Chrome插件(扩展)开发全攻略

bananalone

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Chrome插件开发和面向初学者的开发技巧

Chrome插件开发和面向初学者的开发技巧1 概述1.1 基础1.2 文件1.3 架构2 技巧2.1 快速定位DOM节点1 概述1.1 基础1.2 文件1.3 架构2 技巧2.1 快速定位DOM节点在想要查看的DOM节点上左键选择检查（inspect）。比如我想知道必应搜索按钮在DOM中的位置：...
复制链接

扫一扫