首页chrome插件示例

chrome插件示例

时间: 2024-10-23 21:01:50 浏览: 32

Chrome插件是一种小型的应用程序，可以在Google Chrome浏览器上扩展其功能。它们通常由HTML、CSS、JavaScript以及JSON等文件构成，可以访问特定API，如存储数据、修改网页内容、提供新的用户界面等。以下是Chrome插件的一个简单示例： **manifest.json** (核心配置文件) ```json { "name": "My Extension", "version": "1.0", "manifest_version": 2, "description": "A simple extension to highlight text", "permissions": ["activeTab", "storage"], "background": { "scripts": ["background.js"] }, "browser_action": { "default_popup": "popup.html" } } ``` **background.js** ```javascript chrome.browserAction.onClicked.addListener(function(tab) { chrome.tabs.executeScript({ file: 'highlight.js', code: 'document.body.style.backgroundColor = "yellow";' }); }); ``` **highlight.js** 这是一个简单的JavaScript脚本，当点击浏览器动作图标时会改变当前页面背景色。 **popup.html** (弹出窗口) ```html <!DOCTYPE html> <html> <head> <style>body { color: white;}</style> </head> <body> <button onclick="selectText()">Select Text</button> <script src="popup.js"></script> </body> </html> ``` **popup.js** ```javascript function selectText() { chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) { chrome.tabs.executeScript(tabs[0].id, { code: 'window.getSelection().toString()' }); }); } ``` 这个插件的功能是选中文本并更改背景颜色。当你安装并启用它，点击右上角的图标，会选择文本并在背景上高亮显示。

阅读全文