Chromium扩展（Extension）机制简要介绍和学习计划

最新推荐文章于 2024-08-22 08:15:03 发布

绿疏忽

最新推荐文章于 2024-08-22 08:15:03 发布

阅读量563

点赞数

本文链接：https://blog.csdn.net/ufryyfdf/article/details/87885587

版权

本文简要介绍了Chromium的Extension机制，包括Browser Action和Page Action的实现，以及它们如何通过manifest.json文件、popup.html、content.js等进行配置。详细解析了背景页面、内容脚本的加载过程和通信方式，为深入理解Chromium Extension的开发和工作原理奠定了基础。

摘要由CSDN通过智能技术生成

分享一下我老师大神的人工智能教程。零基础！通俗易懂！风趣幽默！还带黄段子！希望你也加入到我们人工智能的队伍中来！https://blog.csdn.net/jiangjunshow

Chromium提供了一种Extension机制，用来增强浏览器功能。我们可以将Extension看作是一种运行在Chromium中的应用。这种应用的开发语言是JavaScript，并且UI通过HTML描述。通过使用Chromium提供的API，Extension可以访问网络，修改浏览器行为，以及操作网页的内容等。本文接下来对Chromium的Extension机制进行简要介绍，以及制定学习计划。

老罗的新浪微博：http://weibo.com/shengyangluo，欢迎关注！

《Android系统源代码情景分析》一书正在进击的程序员网（http://0xcc0xcd.com）中连载，点击进入！

在Chrome（基于Chromium实现，以下我们将交替使用Chrome和Chromium）的地址栏中输入"chrome://extensions"，就可以看到当前安装的所有Extension，如图1所示：

图1 Chrome中的Extension列表

图1显示了两个Extension。一个是基于Browser Action实现的，另一个是基于Page Action实现的。它们在地址栏的右边分别对应有一个Button。点击这两个Button，可以弹出一个窗口。这一点后面我们会看到。

接下来，我们就通过上述两个Extension例子，对Chromium的Extension机制进行介绍。

每一个Extension都包含有一个清单文件manifest.json，类似于Android应用程序的AndroidManifest.xml文件。前者是json格式的，后者是xml格式的。清单文件描述了Extension的内容。以图1所示的Browser action example为例，它的manifest.json如下所示：

{  "manifest_version": 2,  "name": "Browser action example",  "description": "This extension show a image and changes a web page's background",  "version": "1.0",  "browser_action": {    "default_icon": "icon.png",    "default_popup": "popup.html"  },  "content_scripts": [    {      "matches": ["http://*/*"],      "js": ["content.js"],      "run_at": "document_start",      "all_frames": true    }  ]}

前面几行是一些描述性信息。后面的browser_action和content_scripts指定了一个Browser Action和一个Content Script。

Browser Action对在浏览器中加载的所有网页都生效。后面我们可以看到，Extension还有一种Page Action，它针对特定的网页生效。一个Extension最多可以有一个Browser Action或者Page Action。不管是Browser Action，还是Page Action，都可以指定一个icon文件和一个popup文件。前者是一个图片，后者是一个html文件。指定的icon将会以Button的形式展现在地址栏的右边。当这个Button被点击的时候，就会弹出一个窗口，窗口会加载在清单文件中指定的popup.html文件。注意，这里指定的文件路径都是相对路径，相对Extension的根目录的。

上述popup.html的内容如下所示：

<html>  <head>    <title>Getting Started Extension's Popup</title>    <style>      body {        font-family: "Segoe UI", "Lucida Grande", Tahoma, sans-serif;        font-size: 100%;      }      #status {        /* avoid an excessively wide status text */        white-space: pre;        text-overflow: ellipsis;        overflow: hidden;        max-width: 400px;      }    </style>    <!--      - JavaScript and HTML must be in separate files: see our Content Security      - Policy documentation[1] for details and explanation.      -      - [1]: https://developer.chrome.com/extensions/contentSecurityPolicy     -->    <script src="popup.js"></script>  </head>  <body>    <div id="status"></div>    <img id="image-result" hidden>  </body></html>

这个html文件的内容很简单，由以下内容组成：

1. 一个popup.js脚本

2. 一个div标签

3. 一个img标签

其中，div标签用来显示状态信息，img标签用来显示图片。它们的内容都是popup.js指定的，如下所示：

function getImageUrl(callback, errorCallback) {  callback("https://images-cn-8.ssl-images-amazon.com/images/I/61vnPRDVoeL.jpg", 200, 250);}function renderStatus(statusText) {  document.getElementById('status').textContent = statusText;}document.addEventListener('DOMContentLoaded', function() {    getImageUrl(function(imageUrl, width, height) {      var imageResult = document.getElementById('image-result');      imageResult.width = width;      imageResult.height = height;      imageResult.src = imageUrl;      imageResult.hidden =