开发Chrome插件教程

开发Chrome插件教程

插件由不同组件构成，组件包括background脚本, content脚本,一个选项页, UI元素和一些逻辑文件。扩展组件的实现技术包括HTML、CSS和Javascript。

创建Manifest

扩展从Manifest文件开始，文件名叫​​manifest.json​​​。 1、打开chrome://extensions，也可以通过更多工具-扩展程序来打开这个页面。 2、打开开发者模式。 3、加载未打包按钮 这个扩展会被成功加载。

增加功能

现在还没有任何功能，现在通过​​background.js​​​增加一个后台功能。 首先在manifest.json里配置注册后台脚本。

{ "name": "Getting Started Example", "version": "1.0", "description": "Build an Extension!", "manifest_version": 2 }

现在扩展就会知道了插件包含一个非永久驻存的后台脚本，并扫描注册的脚本文件并加载事件监听。 当安装插件后，需要有一些永久可用的信息。 我们可以在安装时，通过storage API设置一个值。 这样可以允许多个扩展组件区访问这个值，并更新他。

chrome.runtime.onInstalled.addListener(function () { chrome.storage.sync.set({ color: '#3aa757' }, function () { console.log("The color is green."); });});

大部分API需要在权限​​permissions​​里注册一下才允许使用。

{"name": "Getting Started Example","version": "1.0","description": "Build an Extension!","permissions": ["storage"],"background": { "scripts": ["background.js"], "persistent": false},"manifest_version": 2}

就会在控制台输出​​The color is green.​​。

用户界面（UI）

插件有很多格式的用户界面，这里介绍一个popup。 首先创建一个​​​popup.html​​文件。

这个文件仍然需要通过修改manifest.json来告诉Chrome的存在。

{ "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 }

增加了一个​​page_action​​​，并且​​default_icon​​里在配置了图标。

另外在扩展管理页、权限提示页也需要图标，可以在​​icons​​里注册配置。

{ "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 }

.runtime.onInstalled.addListener(function() { chrome.storage.sync.set({color: '#3aa757'}, function() { console.log('The color is green.'); }); chrome.declarativeContent.onPageChanged.removeRules(undefined, function() { chrome.declarativeContent.onPageChanged.addRules([{ conditions: [new chrome.declarativeContent.PageStateMatcher({ // pageUrl: {hostEquals: 'developer.chrome.com'}, }) ], actions: [new chrome.declarativeContent.ShowPageAction()] }]); }); });

这里用到了​​declarativeContent​​,需要在manifest里授权。

"permissions": ["declarativeContent", "storage"],

let changeColor = document.getElementById('changeColor'); chrome.storage.sync.get('color', function(data) { changeColor.style.backgroundColor = data.color; changeColor.setAttribute('value', data.color); });

这段代码会从storage里获取颜色，然后把popup.html的按钮变成这个色值。

...

重新加载插件，就会看到绿色的按钮。

业务逻辑层

接下来就是给弹出页的按钮添加事件监听，改变浏览器activeTab的背景色：

let changeColor = document.getElementById('changeColor'); ... changeColor.onclick = function(element) { let color = element.target.value; chrome.tabs.query({active: true, currentWindow: true}, function(tabs) { chrome.tabs.executeScript( tabs[0].id, {code: 'document.body.style.backgroundColor = "' + color + '";'}); }); };

另外还需要增加权限：

"permissions": ["activeTab", "declarativeContent", "storage"],

用户选项

现在只能设置背景色为绿色，如果用户像改变其他颜色就需要用户选项页。 首先增加一个选项页​​​options.html​​：

其次需要在manifest里面注册一下这个页面：

"options_page": "options.html",

最后增加逻辑功能​​options.js​​：

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);

现在就可以在选项页配置颜色了。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。