首先，你需要创建一个名为 `manifest.json` 的文件，它是
Chrome 扩展程序的配置文件。下面是一个简单的 `manifest.json` 文件的示例：
```json
{
"name": "My
Chrome Extension",
"version": "1.0",
"description": "This is a simple
Chrome extension.",
"manifest_version": 2,
"icons": {
"16": "icon16.png",
"48": "icon48.png",
"128": "icon128.png"
},
"browser_action": {
"default_icon": {
"16": "icon16.png",
"48": "icon48.png",
"128": "icon128.png"
},
"default_title": "Click me!",
"default_popup": "popup.html"
}
}
```
这个 `manifest.json` 文件定义了一个名为 "My
Chrome Extension" 的扩展程序，它的版本号是 "1.0"，描述是 "This is a simple
Chrome extension."。它有三个图标，分别是 16x16、48x48 和 128x128 像素，分别对应着 `icon16.png`、`icon48.png` 和 `icon128.png`。它还定义了一个浏览器操作 `browser_action`，它的默认图标和标题是上面定义的图标和 "Click me!"，点击它会弹出一个名为 `popup.html` 的页面。
下一步是创建一个 `popup.html` 文件，它是浏览器操作的弹出窗口。下面是一个简单的 `popup.html` 文件的示例：
```html
<!DOCTYPE html>
<html>
<head>
<title>Popup</title>
<script src="popup.js"></script>
</head>
<body>
<h1>Hello, World!</h1>
<p>Click the button below to change the background color of this page.</p>
<button id="changeColor">Change Color</button>
</body>
</html>
```
这个 `popup.html` 文件包含一个标题为 "Popup" 的页面，以及一个名为 `popup.js` 的 JavaScript 文件。它还包含一个 `h1` 标签和一个 `p` 标签，以及一个名为 `changeColor` 的按钮。
最后，你需要创建一个 `popup.js` 文件，它包含了浏览器操作的逻辑。下面是一个简单的 `popup.js` 文件的示例：
```javascript
document.addEventListener("DOMContentLoaded", function () {
var changeColorButton = document.getElementById("changeColor");
changeColorButton.addEventListener("click", function () {
chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
chrome.tabs.executeScript(
tabs[0].id,
{ code: "document.body.style.backgroundColor='red';" }
);
});
});
});
```
这个 `popup.js` 文件在页面加载后会为 `changeColor` 按钮添加一个点击事件。当点击按钮时，它会查询当前选项卡，然后使用 `
chrome.tabs.executeScript()` 方法将一段 JavaScript 代码注入到选项卡中，这段代码会将当前页面的
背景色更改为红色。
这就是一个简单的
Chrome 扩展程序的示例。你可以将这些文件保存在同一个目录中，然后在
Chrome 浏览器中打开 `
chrome://extensions/` 页面，将 "开发者
模式" 开启，然后点击 "加载已解压的扩展程序" 按钮，选择保存了这些文件的目录即可。
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
4208
