下面我会详细讲解如何制作“别人家的”Chrome插件。
1. 准备工作
首先，我们需要准备以下工具和环境：
- Chrome浏览器
- 开发者模式开启
- 文本编辑器（例如VS Code）
- 基本的HTML、CSS、JavaScript知识
- 图片编辑软件（例如Photoshop）
2. 创建插件
步骤一：创建插件文件夹
我们需要在计算机上创建一个文件夹，用于存放插件文件。命名为 myplugin。
步骤二：创建清单文件（manifest.json）
在 myplugin 文件夹中，创建一个名为 manifest.json 的文件。该文件包含了插件的元数据，必须存在于插件的根目录下。
{
"manifest_version": 2,
"name": "MyPlugin",
"version": "1.0",
"description": "我的第一个Chrome插件",
"icons": {
"16": "icon16.png",
"48": "icon48.png",
"128": "icon128.png"
},
"browser_action": {
"default_icon": "icon48.png",
"default_popup": "popup.html"
},
"permissions": [
"storage"
]
}
在上述清单文件中，我们定义了以下内容：
manifest_version：告诉Chrome这是哪个版本的清单文件。name：插件的名称。version：插件的版本号。description：插件的描述。icons：插件图标的路径和尺寸。browser_action：插件浏览器按钮的默认行为，比如点击按钮弹出一个页面等。permissions：这个插件需要的权限。
步骤三：创建弹出页面（popup.html）
在 myplugin 文件夹中，创建一个名为 popup.html 的文件，它将作为插件的弹出页面。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>MyPlugin</title>
<style>
body {
width: 200px;
height: 200px;
margin: 0;
padding: 0;
background-color: #f1f1f1;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
在上述代码中，我们定义了一个简单的弹出页面，包含了一个 h1 标题和一些样式。
步骤四：创建图标文件
在 myplugin 文件夹中，创建三个分别为 icon16.png、 icon48.png 和 icon128.png 的图标文件，用于代表插件的图标。
3. 载入插件
步骤一：打开Chrome扩展程序
在Chrome浏览器的地址栏输入 chrome://extensions ，打开Chrome扩展程序页面。
步骤二：加载插件
点击左上角的 加载已解压的扩展程序 按钮，选择我们创建的 myplugin 文件夹，点击确定。
步骤三：查看插件
现在我们已经成功地在Chrome浏览器上载入了我们自己创建的插件，通过查看其图标，可以看到它出现在了工具栏上。
示例说明
下面看两条实例说明，让我们更具体的理解如何制作“别人家的”Chrome插件。
示例一：谷歌翻译
我们可以利用Google翻译提供的API，制作一个可以实现简单翻译功能的Chrome插件。
首先，我们需要根据谷歌翻译API的文档，获取到我们需要的API链接。
然后，新建一个名为 popup.html 的文件，内容为：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Google Translate</title>
<script src="popup.js"></script>
</head>
<body>
<textarea id="input" rows="5" cols="25"></textarea>
<br>
<button id="translate">翻译</button>
<br>
<textarea id="output" rows="5" cols="25" readonly></textarea>
</body>
</html>
在上面的代码中，我们需要新建一个用于输入文本的文本框（id=”input”），一个用于转换的翻译按钮（id=”translate”），以及一个用于输出结果的文本框（id=”output”）。
接下来，新建一个名为 popup.js 的文件，内容为：
document.getElementById('translate').addEventListener('click', function(){
var input = document.getElementById('input').value;
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://translate.google.cn/translate_a/single?client=gtx&sl=auto&tl=zh-CN&dt=t&q=' + encodeURI(input));
xhr.onreadystatechange = function (e) {
if (xhr.readyState == 4 && xhr.status == 200) {
var response = JSON.parse(xhr.responseText);
var output = response[0][0][0];
document.getElementById('output').value = output;
}
};
xhr.send();
});
在上面的代码中，我们需要通过获取用户输入，向谷歌翻译API发送请求，将翻译结果返回。
最后更新我们的 manifest.json 文件：
{
...
"permissions": [
"activeTab"
],
"browser_action": {
"default_popup": "popup.html"
}
...
}
这样就完成了一个简单的谷歌翻译插件。
示例二：页面抓取
假设我们需要从一个特定网站上爬取某个内容，可以制作一个专用的Chrome插件。
首先，我们需要使用 content_scripts，来指定插件需要在哪个页面上运行。在清单文件中加上如下代码：
{
...
"content_scripts": [
{
"matches": [
"*://www.example.com/*"
],
"js": [
"content.js"
]
}
],
...
}
在上面的代码中，我们指定了插件需要在 www.example.com 网站上运行，并且使用 content.js 文件来运行我们的代码。
接下来，新建一个名为 content.js 的文件，内容为：
var data = {};
data.name = document.querySelector('h1').innerText;
data.description = document.querySelector('.description').innerText;
data.price = document.querySelector('.price').innerText;
chrome.runtime.sendMessage(data);
在上面的代码中，我们需要通过获取特定页面上的元素信息，来爬取我们需要的数据，并通过 chrome.runtime.sendMessage() 函数向插件发送数据。
最后，在后台脚本中加入如下代码，处理我们需求数据：
chrome.runtime.onMessage.addListener(function (data) {
console.log(data);
});
这样就完成了一个简单的页面抓取插件。
补充说明：以上示例为纯展示，具体实现可能还需要加入额外的逻辑判断、错误处理等相关内容。