📌  相关文章
📜  chrome 扩展按钮点击到不同的 html 页面 - Html (1)

📅  最后修改于: 2023-12-03 15:14:08.906000             🧑  作者: Mango

Chrome 扩展按钮点击到不同的 HTML 页面

当我们创建 Chrome 扩展时，经常需要在扩展按钮被点击时打开另一个 HTML 页面。本文将介绍如何通过 Chrome 扩展按钮点击打开不同的 HTML 页面。

步骤
  1. 首先，在扩展的 manifest.json 文件中定义一个浏览器操作（Browser Action）。
{
  "manifest_version": 2,

  "name": "My Extension",
  "version": "1.0",

  "browser_action": {
    "default_popup": "popup.html"
  }
}

在这个例子中，我们定义了一个名为“browser_action”的属性，并将default_popup属性设置为“popup.html”，这意味着当用户单击扩展图标时，将打开 popup.html 页面。

  1. 创建 popup.html 页面并添加一个按钮。
<!DOCTYPE html>
<html>
<head>
  <title>My Extension</title>
  <script src="popup.js"></script>
</head>
<body>
  <button id="myButton">Click me</button>
</body>
</html>

在这个例子中，我们创建了一个名为“myButton”的按钮，并添加了一个名为“popup.js”的脚本文件。

  1. 在 popup.js 文件中添加代码以在单击按钮时打开另一个 HTML 页面。
document.getElementById('myButton').addEventListener('click', function() {
  chrome.tabs.create({ 'url': 'http://www.example.com' });
});

在这个例子中，我们添加了一个单击事件监听器，当用户单击按钮时，我们调用 Chrome 扩展 API 中的 chrome.tabs.create() 方法打开一个新标签页，并将该标签页的 URL 设置为 http://www.example.com。

结论

通过以上的步骤，我们可以在 Chrome 扩展中创建一个浏览器操作按钮，单击该按钮时可以打开任何 HTML 页面。此方法可用于创建任何类型的 Chrome 扩展，包括工具栏、右键菜单、侧栏菜单等。