火狐浏览器插件开发小试

Leon Fly

已于 2023-02-18 21:03:00 修改

阅读量662

点赞数

文章标签： javascript 前端 json

于 2023-02-18 20:57:52 首次发布

本文链接：https://blog.csdn.net/the_27th/article/details/129104423

版权

本文介绍了如何开发火狐浏览器插件，当点击插件时，弹出对话框让用户填写内容，然后使用Python的FastAPI框架创建后台服务接收并处理这些内容。插件代码包括manifest.json配置、HTML弹窗及JavaScript脚本，实现了与后台的交互。

摘要由CSDN通过智能技术生成

火狐浏览器插件开发

官方文档

详情

在火狐浏览器开发插件，点击插件时，弹出对话框，填写内容后，可以将指定格式内容提交到远程服务。

后台服务

此处选用python的 FastAPI
代码如下：

from typing import Union

from fastapi.middleware.cors import CORSMiddleware
from fastapi import FastAPI
from pydantic import BaseModel

app = FastAPI()

origins = [
    "*",
]

app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

class People(BaseModel):
    name:str
    content: str


@app.post("/people")
def post_item(people: People):
    print(people)
    return {"people": people}

插件代码

文件结构

在这里插入图片描述

代码内容

manifest.json

{

  "manifest_version": 2,
  "name": "Borderify",
  "version": "1.0",

  "description": "Adds a red border to all webpages matching mozilla.org.",

  "browser_action": {
    "default_icon": "icons/beasts-32.png",
    "default_title": "Beastify",
    "default_popup": "popup/page.html"
  },
  "permissions": [
    "activeTab"
  ],
  "content_scripts": [
    {
      "matches": ["*://*.baidu.com/*"]
    }
  ]
}

popup/page.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>

<body>
  
<div>
    name <input type="text" id="context" name="fname"><br>
    <input type="submit" id="submit" value="提交">
  </div>
  
  <script src="page.js">
    
  </script>
</body>

</html>

popup/page.js

document.getElementById("submit").addEventListener('click', function() {
    let value = document.getElementById("context").value
    console.log(4)
    
    browser.tabs.query({active: true, currentWindow: true})
    .then(res => {
        fetch('http://127.0.0.1:8000/people', {
            "method": "POST",
            "headers": {
                "Content-Type": "application/json"
            },
            "body": JSON.stringify({
                "name": value,
                "content": JSON.stringify(res[0].url)
            })
        })
    });
})