浏览器插件开发 · PHP学习

# 浏览器插件开发 [为官方扩展网站](http://www.chromeextensions.org/category/games/) [http://open.chrome.360.cn/extension\_dev/pageAction.html](http://open.chrome.360.cn/extension_dev/pageAction.html) C:\\Users{userName}\\AppData\\Roaming\\Mozilla\\Firefox\\Profiles\\xop0z7e2.dev-edition-default\\extensions C:\\Users{userName}\\AppData\\Local\\Google\\Chrome\\User Data\\Default\\Extensions # **入门** ## **创建json清单** 对manifest.json文件的修改必须通过重新加载才能够生效 ``` <pre class="calibre10">``` { "name": "Getting Started Example", "version": "1.0", "description": "Build an Extension!", "manifest_version": 2 } ``` ``` chrome://extensions开启开发人员选项并安装插件 ## **添加指令** 虽然已经安装了扩展，但它没有任何指示。通过创建一个名为background的文件来引入一个背景脚本。或者在这里下载，并将其放在扩展目录中。后台脚本和许多其他重要组件必须在清单中注册。在清单中注册一个后台脚本将告诉扩展要引用哪个文件，以及该文件的行为方式。 ``` <pre class="calibre10">``` { "name": "Getting Started Example", "version": "1.0", "description": "Build an Extension!", "background": { "scripts": ["background.js"], "persistent": false }, "manifest_version": 2 } ``` ``` 扩展现在知道到它包含了一个非持久的后台脚本，并将扫描已注册的文件以获取需要监听的重要事件。该扩展程序知道它包含一个非持久性后台脚本，并且将扫描已注册文件中需要侦听的重要事件此扩展在安装后将需要来自持久变量的信息。首先[`runtime.onInstalled`](https://developer.chrome.com/runtime#event-onInstalled)在后台脚本中包含一个监听事件。在`onInstalled`侦听器内部，扩展将使用[存储](https://developer.chrome.com/storage)API设置一个值。这将允许多个扩展组件访问该值并进行更新 ``` <pre class="calibre10">``` chrome.runtime.onInstalled.addListener(function() { chrome.storage.sync.set({color: '#3aa757'}, function() { console.log("The color is green."); }); }); /** 监听来自devtools（F2控制台）面板的消息 */ //chrome.runtime.onMessage.addListener(handleMessage); ``` ``` 大多数API（包括[存储](https://developer.chrome.com/storage)API）都必须`"permissions"`在清单中的字段下注册，扩展才能使用它们 ``` <pre class="calibre10">``` { "name": "Getting Started Example", "version": "1.0", "description": "Build an Extension!", "permissions": ["storage"], "background": { "scripts": ["background.js"], "persistent": false }, "manifest_version": 2 } ``` ``` 重新安装一下点击图中背景页，弹出的控制台显示出了内容 ![](https://img.kancloud.cn/81/ee/81ee017e1cd874ddad896612508fa8b7_1058x299.png) ## **介绍用户界面** 扩展可以具有多种形式的[用户界面](https://developer.chrome.com/user_interface)，但是这种形式将使用[弹出窗口](https://developer.chrome.com/user_interface#popup)。创建并添加标题`popup.html`为目录的文件，或[在此处](https://developer.chrome.com/extensions/examples/tutorials/get_started/popup.html)下载。此扩展程序使用按钮来更改背景颜色。 ``` <pre class="calibre10">``` <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <style> button { height: 30px; width: auto; outline: none; background-color: red; } </style> </head> <body> <div style="width: 250px"> <button id="changeColor">这是一个按钮</button> </div> </body> </html> ``` ``` 与后台脚本一样，该文件需要在中的清单中指定为弹出窗口[`page_action`](https://developer.chrome.com/pageAction)。 > page\_action与browser\_action只能选择其一种 ``` <pre class="calibre10">``` { "name": "Getting Started Example", "version": "1.0", "description": "Build an Extension!", "permissions": ["storage"], "background": { "scripts": ["background.js"], "persistent": false }, "page_action": { "default_popup": "popup.html" }, "manifest_version": 2 } ``` ``` 工具栏图标的名称也包含`page_action`在该`default_icons`字段下。在[此处](https://developer.chrome.com/extensions/examples/tutorials/get_started/images.zip)下载images文件夹，解压缩，并将其放置在扩展程序的目录中。更新清单，以便扩展程序知道如何使用图像。 ``` <pre class="calibre10">``` { "name": "Getting Started Example", "version": "1.0", "description": "Build an Extension!", "permissions": ["storage"], "background": { "scripts": ["background.js"], "persistent": false }, "page_action": { "default_popup": "popup.html", "default_icon": { "16": "images/get_started16.png", "32": "images/get_started32.png", "48": "images/get_started48.png", "128": "images/get_started128.png" } }, "manifest_version": 2 } ``` ``` 扩展程序还会在扩展程序管理页面上显示图像，权限警告和网站图标。这些图像在清单中的下方指定[`icons`](https://developer.chrome.com/user_interface#icons)。 ``` <pre class="calibre10">``` { "name": "Getting Started Example", "version": "1.0", "description": "Build an Extension!", "permissions": ["storage"], "background": { "scripts": ["background.js"], "persistent": false }, "page_action": { "default_popup": "popup.html", "default_icon": { "16": "images/get_started16.png", "32": "images/get_started32.png", "48": "images/get_started48.png", "128": "images/get_started128.png" } }, "icons": { "16": "images/get_started16.png", "32": "images/get_started32.png", "48": "images/get_started48.png", "128": "images/get_started128.png" }, "manifest_version": 2 } ``` ``` 如果在此阶段重新加载扩展，它将包含一个灰度图标，但不会包含任何功能差异。由于`page_action`是在清单中声明的，因此取决于扩展名来告知浏览器用户何时可以与进行交互`popup.html`。 **page\_action（未激活）与browser\_action区别** ![](https://img.kancloud.cn/da/ba/daba2aa8911093437bcc5b4833620e1c_309x263.gif) 使用侦听器事件中的[`declarativeContent`](https://developer.chrome.com/declarativeContent)API将声明的规则添加到后台脚本`runtime.onInstalled`。 ``` <pre class="calibre10">``` chrome.runtime.onInstalled.addListener(function() { chrome.storage.sync.set({color: '#3aa757'}, function() { console.log('The color is green.'); }); //使用chrome.declarativeContent API可以根据页面的内容执行操作，而无需获得读取页面内容的权限。 //removeRules(可选--如果传递一个数组则只有包含该数组中的标识符的规则才取消注册, 可选--取消注册规则时调用的回调函数)：注销当前注册的规则 chrome.declarativeContent.onPageChanged.removeRules(undefined, function() { //Rule({(可选)id, (可选)tags, conditions, actions,(可选)priority}) let rules =[{ //id:"",//允许引用此规则的可选标识符 //tags:"",//标签可用于注释规则和对规则集执行操作 conditions: [ //PageStateMatcher(可选对象参数) 根据各种条件匹配网页的状态 new chrome.declarativeContent.PageStateMatcher({ pageUrl: { //hostContains:".foo"//包含匹配可'www.foobar.com' and 'foo.com' 同理"foo." ".foo." 用hostSuffix更好因为没有在主机名的末尾添加任何隐式点 hostEquals: 'developer.chrome.com', schemes: ['https'], //...更多请参考UrlFilter对象 },//UrlFilter对象，如果满足页面的顶级URL的UrlFilter条件，则匹配 //css:null,//如果数组中的所有CSS选择器都匹配显示在与页面主框架的原点相同的框架中的元素，则匹配。此数组中的所有选择器必须是复合选择器，以加快匹配速度。注意:列出数百个CSS选择器或列出每个页面匹配数百次的CSS选择器会降低web站点的速度。 //isBookmarked:false//从Chrome 45开始。如果页面的书签状态等于指定值，则匹配。赋予书签权限 }) ],//可以触发动作的条件列表 //ShowPageAction在满足相应条件时显示扩展的页面动作。此操作可以在没有主机权限的情况下使用，但扩展必须具有页面操作。如果扩展具有activeTab权限，则单击页面操作将授予对active选项卡的访问权 actions: [new chrome.declarativeContent.ShowPageAction()],//满足条件之一时触发的动作列表 //priority:100//此规则的可选优先级。默认为100 }] //addRules(如果传递了数组，则仅返回该数组中包含标识符的规则, 可选--注册规则时调用):注册规则 chrome.declarativeContent.onPageChanged.addRules(rules); }); }); /** 监听来自devtools（F2控制台）面板的消息 */ //chrome.runtime.onMessage.addListener(handleMessage); ``` ``` 该扩展将需要权限才能访问[`declarativeContent`](https://developer.chrome.com/declarativeContent)其清单中的API。 ``` <pre class="calibre10">``` { "name": "Getting Started Example", ... "permissions": ["declarativeContent", "storage"], ... } ``` ``` 现在，当用户导航到包含的URL([这里设置的是developer.chrome.com](http://xn--developer-pr6sg15lnmwzp9an9l47g.chrome.com))时，浏览器将在浏览器工具栏中显示一个全彩的页面操作图标`"developer.chrome.com"`。图标为全色时，用户可以单击它以查看popup.html。 ![](https://img.kancloud.cn/1f/72/1f72e01829a4f4111ed2d3f0bbec9d25_343x263.png) 弹出式UI的最后一步是为按钮添加颜色。创建一个名为`popup.js`以下文件的文件并将其添加到扩展目录，或[在此处](https://developer.chrome.com/extensions/examples/tutorials/get_started/popup.js)下载。 ``` <pre class="calibre10">``` let changeColor = document.getElementById('changeColor'); chrome.storage.sync.get('color', function(data) { changeColor.style.backgroundColor = data.color; changeColor.setAttribute('value', data.color); }); ``` ``` 此代码从中获取按钮`popup.html`并从存储中请求颜色值。然后，它将颜色用作按钮的背景。包括脚本标记`popup.js`在`popup.html`。 ``` <pre class="calibre10">``` <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <style> button { height: 30px; width: auto; outline: none; background-color: red; } </style> </head> <body> <div style="width: 250px"> <button id="changeColor">这是一个按钮</button> <script src="js/popup.js"></script> </div> </body> </html> ``` ``` 重新加载扩展以查看绿色按钮。 ![](https://img.kancloud.cn/60/f6/60f664f6a15a5c422730d7d3659ca0d4_343x263.png) ## **层逻辑** 现在，该扩展程序知道在[developer.chrome.com](https://developer.chrome.com/)上用户应该可以使用该弹出窗口，并显示一个彩色按钮，但是需要逻辑来进行进一步的用户交互。更新`popup.js`以包括以下代码。 ``` <pre class="calibre10">``` let changeColor = document.getElementById('changeColor'); ... changeColor.onclick = function(element) { let color = element.target.value;//event.target事件的目标DOM元素 chrome.tabs.query({active: true, currentWindow: true}, function(tabs) { //执行js代码点击按钮页面背景的与按钮颜色一样 chrome.tabs.executeScript( tabs[0].id, {code: 'document.body.style.backgroundColor = "' + color + '";'}); }); }; ``` ``` 更新的代码在按钮上添加了onclick事件，该事件触发了以[编程方式注入的内容脚本](https://developer.chrome.com/content_scripts#pi)。这会将页面的背景色变成与按钮相同的颜色。使用程序注入可以允许用户调用内容脚本，而不是将不需要的代码自动插入到网页中。清单需要获得[`activeTab`](https://developer.chrome.com/extensions/activeTab)许可，以允许扩展临时访问[`tabs`](https://developer.chrome.com/tabs)API。这使分机可以进行呼叫[`tabs.executeScript`](https://developer.chrome.com/tabs#method-executeScript)。 ``` <pre class="calibre10">``` { "name": "Getting Started Example", ... "permissions": ["activeTab", "declarativeContent", "storage"], ... } ``` ``` 该扩展程序现在可以正常使用了！重新加载扩展程序，刷新此页面，打开弹出窗口，然后单击按钮将其变为绿色！但是，某些用户可能希望将背景更改为其他颜色。 ## **给用户选项** 该扩展程序当前仅允许用户将背景更改为绿色。包括一个选项页面使用户可以更好地控制扩展功能，从而进一步自定义其浏览体验。首先在名为的目录中创建一个文件，`options.html`并包含以下代码，或[在此处](https://developer.chrome.com/extensions/examples/tutorials/get_started/options.html)下载。 ``` <pre class="calibre10">``` <!DOCTYPE html> <html> <head> <style> button { height: 30px; width: 30px; outline: none; margin: 10px; } </style> </head> <body> <div id="buttonDiv"> </div> <div> <p>Choose a different background color!</p> </div> </body> <script src="options.js"></script> </html> ``` ``` 然后在清单中注册选项页， ``` <pre class="calibre10">``` { "name": "Getting Started Example", ... "options_page": "options.html", ... "manifest_version": 2 } ``` ``` 重新加载扩展名，然后单击**DETAILS(详细信息)**。向下滚动详细信息页面，然后选择**扩展选项**以查看选项页面，尽管该页面当前将显示为空白。 ![](https://img.kancloud.cn/6e/38/6e38fd1ec80cce1943e598f29a28494c_173x212.gif) 最后一步是添加选项逻辑。`options.js`使用以下代码在扩展目录中创建一个文件，或[在此处](https://developer.chrome.com/extensions/examples/tutorials/get_started/options.js)下载。 ``` <pre class="calibre10">``` let page = document.getElementById('buttonDiv'); const kButtonColors = ['#3aa757', '#e8453c', '#f9bb2d', '#4688f1']; function constructOptions(kButtonColors) { for (let item of kButtonColors) { let button = document.createElement('button'); button.style.backgroundColor = item; button.addEventListener('click', function() { chrome.storage.sync.set({color: item}, function() { console.log('color is ' + item); }) }); page.appendChild(button); } } constructOptions(kButtonColors); ``` ``` 提供了四个颜色选项，然后使用onclick事件侦听器将它们生成为选项（options）页面上的按钮。用户单击按钮时，它将更新扩展程序全局存储中的颜色值。由于所有扩展名文件都从全局存储中提取颜色信息，因此不需要更新其他值。 ![](https://img.kancloud.cn/ab/cb/abcbaa28bcf2425a719c54f861e91dda_244x105.png)