帮我写一个简单的Chrome扩展的demo程序

bluesky1年前 ⋅ 803 阅读
好的,以下是一个简单的Chrome扩展的demo程序:

1. 创建一个名为 "my-extension" 的文件夹,并在其中创建一个名为 "manifest.json" 的文件,其中包含以下内容: 

```json
{
  "manifest_version": 2,
  "name": "My Extension",
  "version": "1.0",
  "description": "My first Chrome extension",
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "permissions": [
    "activeTab"
  ]
}
```

2. 在 "my-extension" 文件夹中创建一个名为 "popup.html" 的文件,其中包含以下内容:

```html



  My Extension Popup
  


  

Welcome to My Extension Popup

``` 3. 在 "my-extension" 文件夹中创建一个名为 "popup.js" 的文件,其中包含以下内容: ```js document.getElementById("btn").addEventListener("click", function() { chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) { chrome.tabs.sendMessage(tabs[0].id, { message: "hello" }, function(response) { console.log(response.message); }); }); }); ``` 4. 在 "my-extension" 文件夹中创建一个名为 "icon.png" 的图标文件,作为浏览器扩展的图标。 5. 将 "my-extension" 文件夹加载到 Chrome 浏览器中。 6. 在浏览器中打开一个网站,并单击浏览器扩展图标以打开弹出窗口,然后单击 "Click me!" 按钮。在浏览器控制台中,将显示消息 "received hello message",表明扩展可以与当前网页通信。 这是一个简单的 Chrome 扩展示例,它可以通过发送消息与当前打开的网页进行通信。您可以根据需要进行自定义,以扩展扩展的功能。

全部评论: 0

    相关推荐