浏览器插件开发-manifest文件解读

调研资料

manifest.json 官方文档

Chrome Extension API

360浏览器的插件文档中文, 虽然内核差不多但是不一定与 Chrome api 一致, 可以作为参考

Chrome 官方案例库

案例

如何实现网页和Chrome插件之间的通信

消息传递

manifest.json 配置说明

manifest.json 用于描述 Chrome 插件的源数据，配置信息等，基本内容如下

{
    "name": "名称",
    "description": "描述",
    "version": "打包完成后用于判断插件是否需要更新",
    "manifest_version": 2,
    "browser_action": {
        "default_popup": "xxx.html 右上角点击后的弹窗，可以用一个页面定义",
        "default_icon": "xxx.png 显示在右上角的图标button"
    },
}

配置项简介

1. manifest_version 必填

清单文件格式的版本， Chrome 18 开发 写 2 即可

2. name 必填

插件名称

3. version 必填

插件版本，发布新版本后，浏览器会比较其已安装的插件的版本，有更新的版本则会自动更新

4. description

插件的描述，132个字符限制

5. icons

插件的图标，可以用在 Chrome 商店展示(128 * 128) | 插件管理界面 (48 * 48) | 扩展页图标 (16 * 16) 最好是 png 格式

6. browser_action

可以用来定义点击图标后展示的窗口，对应接口 chrome.browserAction，这项配置与 page_action 是对立的，只能二选一，以下是 browser_action 子项的配置

　　default_icon: Object | string 一个或者一组图标的路径

　　default_title 设置 tooltip

　　default_popup 指定弹出的窗口，可以是任意 html

　　badges “徽章” 就是小图标上的一个标记，用来展示一些状态

7. page_action

代表可以在当前页面执行的操作，不活动时显示灰色,对应接口 chrome.pageAction

　　default_icon: Object | string 一个或者一组图标的路径

　　可用 pageAction.(show|hide) 改变插件活动状态

　　browser_action 和 page_action都用来定义放置在工具栏右上角的图标点击情况，但是两者的活动状态展示 | 点击后的展示 | 主要负责场景是不一致的

猜测 browser_action 适用于用户需要点击图标后在弹窗中操作的场景 page_action 试用与在后台运行，重要工作是监听用户行为的插件

官方建议：如果要实现的功能只针对某一个页面有用则建议使用 page_action 否则使用 browser_action

8. background

用来定义后台脚本部分

扩展是基于事件的程序，这些事件包括导航到新页面、删除书签、或者关闭选项卡，扩展在他们的后台脚本中监视这些事件，然后用指定的指令进行响应

关于后台脚本的状态

　　1、首次下载后或者更新后被加载

　　2、后台脚本下载后会处于休眠状态，直到它侦听的某个事件被触发，

　　3、侦听到事件后，会使用指定的指令响应（怎么相应自定义）

以下情况会需要调用到后台脚本

　　1、扩展首次下载或者版本更新

　　2、后台脚本中正在监听事件，并且这事件被触发了

　　3、content_script 或者其他扩展中调用了 sendMessage

　　4、当前扩展中的其他部分，例如弹窗中调用了 runtime.getBackgroundPage

后台脚本定义选项

{
    ...
    "background": {
        "scripts": ["bg1.js", "bg2.js"], // 后台脚本可以注册多个
        "persistent": false // 是否是持久的，一般为 false, 某些特殊情况需要参考文档
    }
}

事件过滤器，有些事件支持事件过滤，比如选项卡的切换可以监听

// background.js
chrome.webNavigation.onCompleted.addListener(function () {}, {
    url: [{urlMatches: ‘http://www.baidu.com‘}] // 过滤
});

9. chrome setting 修改 | chrome 用户界面展示修改 | chrome 一些内置页面的替换

　　1、setting 使用 chrome_settings_overrides 配置，详细配置查看文档

　　2、用户界面 使用 chrome_ui_overrides 配置，详细配置查看文档,可以设置一些书签方面的规则

　　3、内置页面替换 使用 chrome_url_overrides 配置，详细配置查看文档，标签页、历史页、新 tab 都可替换

10. commands

可以通过 commands 选项定义触发扩展事件的快捷键

{
    ...,
    commands: {
        "xxx": {
            "suggested_key": {
                "default": "Ctrl+X",
                "mac": "Command+X",
                "windows": "Ctrl+X"
            }
        },
        "_execute_browser_action": {...},
        "_execute_page_action": {...}
    }
}

操作快捷键后，插件后台会监听到对应的事件

// background.js
chrome.commands.onCommand.addListener(function(command) {});

注意：\ _execute_browser_action \ _execute_page_action 这两个命令不会被监听，他们是触发 popup 弹出的，要监听 窗口弹出事件可以使用 popup_page 的onDomReady

11. content_scripts

content_script 在一个特殊的环境中运行，可以称之为隔离环境，在这里可以访问所注入页面的DOM，但是不能访问里边的任何 javascript 变量和函数，反之，页面中的js 也不能访问 content_script 中的变量和函数

访问目标网站的 DOM ，可以用来进行通信

分为两种情况，一种是声明型注入脚本，使用 content_scripts 配置项，另一种是编程方式注入使用 permissions: ["activeTab"] 选项，

1、声明型注入脚本 content_scripts 值可以是一个数组，设置不同站点的不同注入文件

　　1）需要设置 matches: ["http://"] 指定匹配的网址，

　　2）js 设置注入脚本

　　3）css 设置注入样式

　　4）run_at 定义注入要本的时机 document_idle 表示浏览器帮你把握时机，会在 DOM 完成 与 window.onload 之后注入；document_start 在 CSS 注入之后，其他任何脚本或者 　　　  DOM 之前注入；document.end DOM 完成之后立即注入，但是在图像等资源之前

2、编程方式注入，不需要指定可访问的域名，可以针对当前活动的选项卡运行，获取临时访问权限 permissions: ["tabs"] 编程方式注入会在 chrome.tabs.executeScript(tabId, 　　details, callback) 接口中详细介绍

通信案例，通过 content_script 与页面 共享 DOM，来实现页面与扩展间的通信

// page.js 页面中触发一个postMessage

document.getElementById(‘btn‘).addEventListener(‘click‘, () => {
    window.postMessage({type: ‘TO_CONNECT_EXTERNAL‘, data: ‘data‘});
})

// content_script.js 中做中转

var port = chrome.runtime.connect();

window.addEventListener(‘message‘, (e) => {
    if (e.source !== window) {return};

    if (event.data.type && (event.data.type == "FROM_PAGE")) {
        port.postMessage(event.data.data); // 发消息给扩展
    }
}, false);

12. externally_connectable

这项配置直接实现网站与插件间通信，但是需要在 manifest.json 中作出如下配置

{
    "externally_connectable": {
        "matches": ["http://*.xx.com"] // 只有匹配的网站才可以通信
    }
}
// page.js 中发出请求

var editorExtensionId = "abcdefghijklmnoabcdefhijklmnoabc";

chrome.runtime.sendMessage(
    editorExtensionId,
    {type: ‘MsgFromPage‘, msg: ‘Hello, I am page~‘},
    function(response) {
      console.log(response);
    }
);

// background.js

chrome.runtime.onMessageExternal.addListener(function(request, sender, sendResponse) {
  // 可以针对sender做一些白名单检查
  // sendResponse返回响应
  if (request.type == ‘MsgFromPage‘) {
    sendResponse({tyep: ‘MsgFromChrome‘, msg: ‘Hello, I am chrome extension~‘});
  }
});

13. offline_enabled

扩展是否需要离线工作，默认为 true, 当chrome 检测到离线时，程序会被高亮显示

14. permissions | optional_permissions

声明 权限（插件实现基础功能所需要的） | 可选权限 （插件中可选的特性所需要的），两者的子配置项是一样的

选项的值是一个数组，代表每一个权限，权限可以是已知的权限字符串 也可以是一个主机的匹配模式
权限字符串大多都对应着一个同名的 chrome[permissionName] API,全部的权限字符串可以点击上边链接查看，一下列出常用的权限

activeTab 允许用户在调用扩展时临时访问当前活动的选项卡，
background 后台权限，可以用来增加Chrome 运行时间，即开机即运行（虽然是不可见的）
bookmarks 书签操作权限
browsingData 浏览器数据操作权限，主要用来清除浏览器数据 cookie storage 等
contentSettings 浏览器设置权限
contextMenus 上下文菜单添加权限
cookies cookie 的查询、修改、onChange 监听
history 浏览器历史记录操作权限
storage chrome.storage 的使用权限（注意不是浏览器的 localStorage）
tabs 选项卡权限，允许创建、修改、重新排列选项卡
webNavigation 请求进行过程中的操作权限
webRequest | webRequestBlocking 开放 正在运行请求的 拦截、阻塞、或修改的权限

15. web_accessible_resources

指定打包资源的的路径字符串数组，这些资源是在扩展中是可用了，例如 content_script会用到的资源等,

16. content_security_policy

内容安全策略, 默认的安全策略为 script-src ‘self‘; object-src ‘self‘ 他会有如下限制

　　1\禁止 eval 及相关函数

　　2\禁止内联<script>块和内联事件处理程序(例如，<button onclick="…">)

　　3\只有扩展包内的脚本和资源才会被加载！通过Web即时下载的将不会被加载

可以通过 白名单 使用通配符设置哪些外部资源是可以访问的（仅支持 https），如下

"content_security_policy": "script-src ‘self‘ https://*.xxx.com; object-src ‘self‘"

浏览器插件开发-manifest文件解读调研资料manifest.json 官方文档Chrome Extension API360浏览器的插件文档 中文, 虽然内核差不多但是不一定与 Chrome api 一致, 可以作为参考Chrome 官方案例库案例如何实现网页和Chrome插件之间的通信消息传递manifest.json 配置说明manifest.json 用于描述 Chrome 插件的源数据，配置信息等，基本内容如下
{    "name": "名称",    "description": "描述",    "version": "打包完成后用于判断插件是否需要更新",    "manifest_version": 2,    "browser_action": {        "default_popup": "xxx.html 右上角点击后的弹窗，可以用一个页面定义",        "default_icon": "xxx.png 显示在右上角的图标button"    },}12345678910配置项简介1. manifest_version 必填清单文件格式的版本， Chrome 18 开发 写 2 即可
2. name 必填插件名称
3. version 必填插件版本，发布新版本后，浏览器会比较其已安装的插件的版本，有更新的版本则会自动更新
4. description插件的描述，132个字符限制
5. icons插件的图标，可以用在 Chrome 商店展示(128 * 128) | 插件管理界面 (48 * 48) | 扩展页图标 (16 * 16) 最好是 png 格式
6. browser_action可以用来定义点击图标后展示的窗口，对应接口 chrome.browserAction，这项配置与 page_action 是对立的，只能二选一，以下是 browser_action 子项的配置
default_icon: Object | string 一个或者一组图标的路径default_title 设置 tooltipdefault_popup 指定弹出的窗口，可以是任意 htmlbadges “徽章” 就是小图标上的一个标记，用来展示一些状态7. page_action代表可以在当前页面执行的操作，不活动时显示灰色,对应接口 chrome.pageAction
default_icon: Object | string 一个或者一组图标的路径可用 pageAction.(show|hide) 改变插件活动状态browser_action 和 page_action都用来定义放置在工具栏右上角的图标点击情况，但是两者的活动状态展示 | 点击后的展示 | 主要负责场景是不一致的
猜测 browser_action 适用于用户需要点击图标后在弹窗中操作的场景 page_action 试用与在后台运行，重要工作是监听用户行为的插件
官方建议：如果要实现的功能只针对某一个页面有用则建议使用 page_action 否则使用 browser_action
8. background用来定义后台脚本部分
扩展是基于事件的程序，这些事件包括导航到新页面、删除书签、或者关闭选项卡，扩展在他们的后台脚本中监视这些事件，然后用指定的指令进行响应
关于后台脚本的状态
首次下载后或者更新后被加载后台脚本下载后会处于休眠状态，直到它侦听的某个事件被触发，侦听到事件后，会使用指定的指令响应（怎么相应自定义）以下情况会需要调用到后台脚本
扩展首次下载或者版本更新后台脚本中正在监听事件，并且这事件被触发了content_script 或者其他扩展中调用了 sendMessage当前扩展中的其他部分，例如弹窗中调用了 runtime.getBackgroundPage后台脚本定义选项
{    ...    "background": {        "scripts": ["bg1.js", "bg2.js"], // 后台脚本可以注册多个        "persistent": false // 是否是持久的，一般为 false, 某些特殊情况需要参考文档     }}
12345678事件过滤器，有些事件支持事件过滤，比如选项卡的切换可以监听
// background.jschrome.webNavigation.onCompleted.addListener(function () {}, {    url: [{urlMatches: ‘http://www.baidu.com‘}] // 过滤});12349. chrome setting 修改 | chrome 用户界面展示修改 | chrome 一些内置页面的替换setting 使用 chrome_settings_overrides 配置，详细配置查看文档用户界面 使用 chrome_ui_overrides 配置，详细配置查看文档,可以设置一些书签方面的规则内置页面替换 使用 chrome_url_overrides 配置，详细配置查看文档，标签页、历史页、新 tab 都可替换10. commands可以通过 commands 选项定义触发扩展事件的快捷键
{    ...,    commands: {        "xxx": {            "suggested_key": {                "default": "Ctrl+X",                "mac": "Command+X",                "windows": "Ctrl+X"            }        },        "_execute_browser_action": {...},        "_execute_page_action": {...}    }}1234567891011121314操作快捷键后，插件后台会监听到对应的事件
// background.jschrome.commands.onCommand.addListener(function(command) {});12注意：\ _execute_browser_action \ _execute_page_action 这两个命令不会被监听，他们是触发 popup 弹出的，要监听 窗口弹出事件可以使用 popup_page 的onDomReady
11. content_scriptscontent_script 在一个特殊的环境中运行，可以称之为隔离环境，在这里可以访问所注入页面的DOM，但是不能访问里边的任何 javascript 变量和函数，反之，页面中的js 也不能访问 content_script 中的变量和函数
访问目标网站的 DOM ，可以用来进行通信
分为两种情况，一种是声明型注入脚本，使用 content_scripts 配置项，另一种是编程方式注入使用 permissions: ["activeTab"] 选项，
声明型注入脚本 content_scripts 值可以是一个数组，设置不同站点的不同注入文件需要设置 matches: ["http://"] 指定匹配的网址，js 设置注入脚本css 设置注入样式run_at 定义注入要本的时机 document_idle 表示浏览器帮你把握时机，会在 DOM 完成 与 window.onload 之后注入；document_start 在 CSS 注入之后，其他任何脚本或者 DOM 之前注入；document.end DOM 完成之后立即注入，但是在图像等资源之前编程方式注入，不需要指定可访问的域名，可以针对当前活动的选项卡运行，获取临时访问权限 permissions: ["tabs"] 编程方式注入会在 chrome.tabs.executeScript(tabId, details, callback) 接口中详细介绍通信案例，通过 content_script 与页面 共享 DOM，来实现页面与扩展间的通信
// page.js 页面中触发一个postMessage
document.getElementById(‘btn‘).addEventListener(‘click‘, () => {    window.postMessage({type: ‘TO_CONNECT_EXTERNAL‘, data: ‘data‘});})
// content_script.js 中做中转
var port = chrome.runtime.connect();
window.addEventListener(‘message‘, (e) => {    if (e.source !== window) {return};
    if (event.data.type && (event.data.type == "FROM_PAGE")) {        port.postMessage(event.data.data); // 发消息给扩展    }}, false);
12345678910111213141516171812. externally_connectable这项配置直接实现网站与插件间通信，但是需要在 manifest.json 中作出如下配置
{    "externally_connectable": {        "matches": ["http://*.xx.com"] // 只有匹配的网站才可以通信    }}12345// page.js 中发出请求
var editorExtensionId = "abcdefghijklmnoabcdefhijklmnoabc";
chrome.runtime.sendMessage(    editorExtensionId,     {type: ‘MsgFromPage‘, msg: ‘Hello, I am page~‘},     function(response) {      console.log(response);    });
// background.js
chrome.runtime.onMessageExternal.addListener(function(request, sender, sendResponse) {  // 可以针对sender做一些白名单检查  // sendResponse返回响应  if (request.type == ‘MsgFromPage‘) {    sendResponse({tyep: ‘MsgFromChrome‘, msg: ‘Hello, I am chrome extension~‘});  }});
1234567891011121314151617181920212213. offline_enabled扩展是否需要离线工作，默认为 true, 当chrome 检测到离线时，程序会被高亮显示
14. permissions | optional_permissions声明 权限（插件实现基础功能所需要的） | 可选权限 （插件中可选的特性所需要的），两者的子配置项是一样的
选项的值是一个数组，代表每一个权限，权限可以是已知的权限字符串 也可以是一个主机的匹配模式权限字符串大多都对应着一个同名的 chrome[permissionName] API,全部的权限字符串可以点击上边链接查看，一下列出常用的权限
activeTab 允许用户在调用扩展时临时访问当前活动的选项卡，background 后台权限，可以用来增加Chrome 运行时间，即开机即运行（虽然是不可见的）bookmarks 书签操作权限browsingData 浏览器数据操作权限，主要用来清除浏览器数据 cookie storage 等contentSettings 浏览器设置权限contextMenus 上下文菜单添加权限cookies cookie 的查询、修改、onChange 监听history 浏览器历史记录操作权限storage chrome.storage 的使用权限（注意不是浏览器的 localStorage）tabs 选项卡权限，允许创建、修改、重新排列选项卡webNavigation 请求进行过程中的操作权限webRequest | webRequestBlocking 开放 正在运行请求的 拦截、阻塞、或修改的权限15. web_accessible_resources指定打包资源的的路径字符串数组，这些资源是在扩展中是可用了，例如 content_script会用到的资源等,
16. content_security_policy内容安全策略, 默认的安全策略为 script-src ‘self‘; object-src ‘self‘ 他会有如下限制
禁止 eval 及相关函数禁止内联<script>块和内联事件处理程序(例如，<button onclick="…">)只有扩展包内的脚本和资源才会被加载！通过Web即时下载的将不会被加载可以通过 白名单 使用通配符设置哪些外部资源是可以访问的（仅支持 https），如下
"content_security_policy": "script-src ‘self‘ https://*.xxx.com; object-src ‘self‘"
点赞收藏分享
————————————————版权声明：本文为CSDN博主「mjzhang1993」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。原文链接：https://blog.csdn.net/mjzhang1993/article/details/84848899

原文地址：https://www.cnblogs.com/Im-Victor/p/12113362.html

时间： 2024-07-30 16:29:19

浏览器插件开发-manifest文件解读的相关文章

chrome 浏览器插件开发（一）—— 创建第一个chrome插件

最近在开发一个chrome插件,在网上找到了一些的文章,虽说按照文章可以写出对应的例子,但若要进行实际开发,发现还是有不少文章中没有的坑.下面我将结合我在开发过程中遇到的几个方面,对这些坑做一下补充. 如果你有前端开发的经验,那么你将可以很快开始你的chrome插件开发.chrome插件开发的主要内容仍然是“老三样”——HTML. CSS.javascript  不同的是执行环境与平时的浏览器略有不同,且有一些安全限制,还有插件开发中能用到一下chrome专门封装api 有哪些比较好的文档? 首

Manifest文件

Manifest文件是简单的文本文件,它告知浏览器缓存的内容(或不缓存的内容) Manifest文件可以分为三个部分: 1.CAHCEMANIFEST-在此标题下列出的文件将在首次下载后进行缓存. CACHE MANIFEST(必需的) /style.css /html5logo.png /active.js 上面的manifest文件列出三个资源,第一个是样式文件,第二个是png格式的html5logo图片,第三个是JavaScript文件.当manifest文件加载后,浏览器会从网站的根目录

浏览器插件开发之——NPAPI

http://blog.csdn.net/cnjet/article/details/6176525 一 浏览器概述 关于什么是浏览器,强大的wiki已经做了比较完善的解释http://en.wikipedia.org/wiki/Web_browser.相关浏览器的比较参考:http://en.wikipedia.org/wiki/Comparison_of_web_browsers#Vulnerabilities 浏览器的核心是layout engine,基本上各浏览器只是包装,主要layou

Android manifest文件中的标签详细介绍

概要 每一个Android应用都应该包含一个manifest文件,即AndroidManifest.xml.它包含了程序运行的一些必备信息,比如: --为Java应用程序指定一个独一无二的名字. --描述程序所包括的成分,如activities, services, broadcast receivers和content providers等内容. --定义哪一个成分是主要的.比如主线程等. --声明程序正常运行所需要的权限.比如,读写SD卡等. --声明该程序的API Level,低于该API

HTML5缓存manifest文件详解

HTML5引入了应用程序缓存(Application Cache),通过创建manifest文件可以轻松地创建Web应用的离线版本,使Web应用可以在没有网络的时候任然可以访问.manifest文件主要定义需要缓存的文件,支持manifest的浏览器将按照manifest文件的规则把文件保存在本地,这样在没有网络的时候就可以从本地读取缓存文件.下面PHP程序员雷雪松详细的讲解下HTML5缓存manifest文件. 1.Manifest的优点a.离线浏览 – 用户可在应用离线时使用它们b.速度 –

HTML5 的 applicationCache 应用程序缓存离线存储功能与 manifest 文件

一. 实现 HTML5 applicationCache 的步骤 一般的操作步骤 1. 新建 manifest 文件 如文件名为  lzwme.manifest,内容配置参考如下: 01 CACHE MANIFEST 02   03 # version 1.2  for update cop help 04   05 # 直接缓存的文件 06 CACHE: 07     /wp-content/themes/weisayheibai/images/meta_author.png 08     /

Manifest文件的最新理解

今天看了Manifest文件内容的相关视频,感觉对知识的理解深刻了一些: 首先,先来说说这个文件的作用,这个文件可以说是聚集了很多个标签,其实对于每个主标签,在将来编译的时候,都会被处理成一个类,而标签里的属性也就成为了该类的成员变量,这些类究竟起到一个什么样的作用呢,主要无外乎标注了一些文件的执行顺序,以及一些权限的赋予,起到一个辅助的作用. 先来说说这个Manifest文件的整体结构,在默认的情况下,最外边标签是为了声明此文件为XML文件,以及XML文件的版本问题,接下来包裹的标签就到正题了

报表XML导出rtf格式，结果在浏览器中打开XML文件。用360浏览器下载rtf文件打开后出现Authentication failed 问题

报表XML导出rtf格式,结果在浏览器中打开XML文件.用360浏览器下载rtf文件打开后出现Authentication failed 问题 直接上问题图: 问题描述:在Oracle EBS中执行"资源事务处理 XML"请求,选择输出rtf格式,完成后查看输出,却在浏览器中打开了XML文件.        提示:需要检查一下是否有对应的模板文件和模板定义有效时间.        解决方案:1. 查看日志. 从中可以看出出错原因,以及模板代码.2. 添加Oracle XML Publi

Manifest文件简介

每个Android项目都包含一个Manifest文件-Android Manifest.xml,它存储在项目层次中的最底层.Manifest可以定义应用程序及其组件和需求的结构和元数据. 它包含了组成应用程序的每一个Activity.Service.Content Provider和Broadcast Receiver的节点,并使用Intent Filter 和权限来确定这些组件之间以及这些组件和其他应用程序是如何交互的. Manifest文件还可以制定应用程序的元数据(如它的图标.版本号或者主