您的位置:首页 > Google Chrome浏览器扩展API使用实战

Google Chrome浏览器扩展API使用实战

文章来源:Chrome浏览器官网 时间:2025-06-15

Google Chrome浏览器扩展API使用实战1

打开Google Chrome浏览器,在右上角找到三个点组成的菜单图标,点击它。在下拉菜单中选择“更多工具”,接着点击“扩展程序”。
进入扩展程序页面后,点击右上角的“开发者模式”按钮,开启开发者模式。
点击“创建新的扩展程序”按钮,选择一个文件夹来存放扩展程序的文件。
在新建的文件夹中,创建一个名为“manifest.json”的文件。这个文件是扩展程序的配置文件,它定义了扩展程序的基本信息和权限。在文件中输入以下内容:
json
{
"manifest_version": 2,
"name": "我的扩展程序",
"version": "1.0",
"description": "这是一个示例扩展程序",
"permissions": ["tabs", "activeTab"]
}

保存“manifest.json”文件后,创建一个名为“content.js”的文件。这个文件用于编写扩展程序的内容脚本,它可以与网页进行交互。在文件中输入以下代码:
javascript
// 获取当前活动标签页
chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
// 向当前页面插入一些内容
tabs[0].contentWindow.document.body.innerHTML += "

这是扩展程序添加的内容

";
});

接下来,在“manifest.json”文件中配置扩展程序的入口文件。在“background”部分添加以下内容:
json
"background": {
"scripts": ["background.js"]
}

然后创建一个名为“background.js”的文件,用于编写扩展程序的背景脚本。在文件中输入以下代码:
javascript
// 监听浏览器动作
chrome.browserAction.onClicked.addListener(function(tab) {
// 执行内容脚本
chrome.tabs.executeScript({
code: 'alert("扩展程序被点击了")'
});
});

完成以上步骤后,Chrome浏览器会自动加载扩展程序。此时,可以在浏览器的工具栏上看到扩展程序的图标。点击图标,会弹出一个提示框,显示“扩展程序被点击了”。同时,当前网页的 body 元素中会添加一个标题“这是扩展程序添加的内容”。
通过这个实战教程,可以初步了解Google Chrome浏览器扩展API的使用。可以根据需要进一步学习和探索更多的API功能,实现更复杂的扩展程序功能。
继续阅读
TOP