简介

chrome API是指Chrome浏览器和ChromeOS设备提供给扩展程序和应用程序的一系列特殊功能接口。可以使用chrome API来控制扩展程序的图标、访问书签、管理浏览数据、发送键盘快捷键等。

使用chrome API

现在已经创建了一个基本的chrome 插件，让我们看看如何使用chrome 的API来访问并操纵浏览器的内置功能。在这里，我们将编写一个非常简单的插件，它可以在新选项卡中打开一个指定的URL。

在manifest.json 文件中添加 "action" 字段，不然添加监听点击事件会出错。例如：

{
  "name": "My Extension",
  "version": "1.0",
  "manifest_version": 3,
  "description": "This is my first Chrome extension!",
  "background": {
    "service_worker": "background.js"
  },
  "action": {}
}

2. 在该文件夹中创建一个名为 background.js 的文件，并将以下代码复制到其中：

console.log("background.js");

chrome.action.onClicked.addListener(function () {
    console.log('点击事件');
		chrome.tabs.create({
      url: "https://www.example.com/"
    });
});

在这个例子中，我们添加了一个单击事件监听器，当用户单击插件图标时，在新选项卡中打开了example的网站。

打开chrome 浏览器并导航到 chrome://extensions/。
点击“重新加载”按钮以重新加载插件。
现在可以在chrome 浏览器中看到插件了！试试单击它并看看是否成功打开了一个新选项卡。

添加popup.html

popup.html是指当用户点击扩展程序的图标时，显示在浏览器工具栏下方的一个小窗口。popup可以包含任意您想要的HTML内容，并且会自适应大小。您可以在manifest.json文件中声明popup，并指定chrome应该在popup中显示的内容。

1、新增popup.html 页面

<!DOCTYPE html>
<html>
  <head>
 
  </head>
  <body>
	<div style='height:100px;'><button>button</button></div>
  </body>
</html>

2、在manifest.json 文件中添加action 配置

{
  "name": "My Extension",
  "version": "1.0",
  "manifest_version": 3,
  "description": "This is my first Chrome extension!",
  "content_scripts": [
		{
			"matches": [
				"<all_urls>"
			],
			"js": [
				"content.js"
			]
		}
	],
  "background": {
    "service_worker": "background.js"
  },
  "action": {
		"default_popup": "popup.html"
  }
}

3、重新加载插件，点击插件查看popup页面

常见错误

1、刷新插件后，查看控制台发现Service Worker 控制台中出现错误：Uncaught TypeError: Cannot read properties of undefined (reading 'onClicked')

这是因为在manifest.json 中没有声明action

chrome插件使用chrome API

简介