Firefox插件（拓展）开发_火狐浏览器插件开发-程序员宅基地

/* 注意，这是一个 json 文件，文件里面不能有注释性的内容 */
{
    "manifest_version": 2,      // 必须是2或3
    "name": "FirstTest",        // 拓展的名称
    "version": "0.0.1",         // 拓展的版本号
 
    "description": "my first test",    // 对当前拓展的描述

    "icons": {                 // 配置拓展的图标
        "48": "./java.jpg",
        "96": "./java.jpg"
    },

    "content_scripts": [       // 内容脚本配置
        {
            "matches": ["*://*/*"],    // 匹配应该当前拓展的URL，当前是匹配全部URL
            "js": ["index.js"]         // 脚本文件
        }
    ]
}

2、创建内容脚本

在项目目录下创建一个 index.js 写一个简单的内容脚本。

这个 index.js 就是manifest.json文件中("content_scripts"."js")[1]中的内容（名字要一致才匹配到）。

document.body.style.backgroundColor = '#ff8f0029';

这个index.js 文件只写一段代码，内容是让 body 的背景色变成一种浅肉色。

3、将拓展临时添加到浏览器中进行测试

在火狐中添加：

3-1、Ctrl+Shift+A 或：

3-2、选择调试附加组件

3-3、选择临时加载附加组件

3-4、选择我们项目中的 manifest.json 文件打开

在谷歌浏览器中是要将整个项目的文件夹导入

3-5、如果打开成功：

此时我们打开其他的网页查看，如进入到百度：

可以看到网页加载完成后，在短暂的时间内背景色会变成上面的颜色，页面的body元素确实添加了我们在内容脚本中设置的样式。

4、继续开发和调试

当我们完成了上述的步骤之后，我们可以继续在我们的项目中进行开发。

当我们需要继续到浏览器中进行调试和观察的时候，只需要将文件保存，然后到浏览器临时扩展处点击重载按钮，即可实现同步（确保项目文件路径没有改变）。

5、添加拓展按钮到工具栏

在 manifest.json 文件中添加：

    "browser_action": {
        "default_icon": {        // 指定图标
            "19": "./java.jpg",
            "38": "./java.jpg"
        },
        "default_title": "这个是工具栏按钮"
    }

6、为在浏览器工具栏中的拓展按钮指定一个弹出窗

在项目中新建一个 popup 文件夹，在文件夹下建立一个 popup.html 文件，在里面编写弹出窗的html代码，也可以编写与之相关的css、js代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        html,body{
            width: 100px;
            box-sizing: border-box;
            /* padding: 5px 8px; */
        }
        .popup-content{
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        .popup-content > button{
            width: 95%;
            height: 35px;
            border-radius: 12px;
            border: 0;
            box-shadow: 0 1px 10px 1px #cccfff;
            margin: 5px 0;
            background-color: rgb(188, 209, 249);
        }
        button:hover{
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="popup-content">
        <button>选项A</button>
        <button>选项B</button>
        <button>选项C</button>
    </div>
</body>
</html>

在 manifest.json 文件中添加 default_popup:

    "browser_action": {
        "default_icon": {
            "19": "./java.jpg",
            "38": "./java.jpg"
        },
        "default_title": "这个是工具栏按钮",
        "default_popup": "popup/popup.html"  // 添加这一句，指定弹出窗的html文件
    }

到临时拓展中对当前拓展进行重载，然后点击工具栏对应的按钮，就可以看到弹出窗：

7、为弹出窗中的按钮绑定点击事件

刚才的 .html 文件中提供了三个按钮，现在试图为每一个按钮绑定一个点击事件，当用户点击到一个按钮时，切换当前页面的 body 元素的背景色。

先修改 .html 文件，为按钮添加一个相同的类名以及不同的innerText：

    <div id="popup-content">
        <button class="popup-btn">#ff00002e</button>
        <button class="popup-btn">#0000ff21</button>
        <button class="popup-btn">#2cff0026</button>
    </div>

在 popup 目录下新建一个 popup.js 文件，然后在.html 文件中引入：

<script src="./popup.js"></script>

编写 popup.js 文件来实现要求：

// 这里的 document 就是我们 编写的 popup.html
let btns = document.querySelectorAll('.popup-btn');

// 这里的打印是在调试插件的控制台中打印
console.log('btns:', btns);

// 为每一个 button 绑定事件
btns.forEach(e => {
    e.addEventListener('click', ()=>{
        // 这里的 innerText 就是一个十六进制的颜色值
        action(e.innerText);
    })
})

function action(color){
    // 使用 tabs 可以与浏览器系统标签进行交互
    /*
        tabs.query 获取具有指定属性的所有选项卡，如果未指定任何属性，则获取所有选项卡
        配置对象的 active:true 表示要获取的选项卡在页面中处于活动状态
        currentWindow:true 表示在当前的窗口中进行操作
    */
    browser.tabs.query({active: true, currentWindow: true}, tabs => {
        // 为当前窗口注入脚本
        browser.tabs.executeScript({code: `
            // 此时是在页面的控制台中打印，操作的是当前浏览的页面 
            console.log('color: ${color}');
            document.body.style.backgroundColor = '${color}';
        `});
    });
}

由于要使用到 tab 这个API，需要在manifest.json 文件中添加许可：

    "permissions":[
        "activeTab"
    ]

到临时拓展的位置，点击当前临时拓展模块上的“检查”按钮，即可打开插件开发的检查调试工具。

当点击工具栏上的插件图标时，会在插件的开发者工具的控制台中打印 popup.html 中三个按钮。

当点击插件弹窗的第一个按钮时，页面背景色改变，同时在控制台中输出当前背景色号：

点击第二个按钮后：

8、插件侧边栏的开启和切换

将侧栏拖动到工具栏的位置：

点击该侧栏按钮就能打开或关闭插件的侧边栏（只有插件提供了侧边栏，才有侧边栏的服务）。

9、插件配置侧边栏

在 manifest.json 中添加 “sidebar_action” 配置项，default_title 设置侧边栏的名称为“My sidebar”，default_panel 设置面板的界面文件为指定的html文件，“default_icon”设置侧边栏的图标。

    "sidebar_action": {
        "default_title": "My sidebar",
        "default_panel": "./sidebar/sidebar.html",
        "default_icon": "./sidebar/sidebar_icon.png"
    },

在项目文件夹下创建一个 sidebar 目录，并在该目录下创建一个 sidebar.html 文件，用来配置侧边栏的界面。

写一个简单的侧边栏界面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .container{
            border: 3px solid pink;
            width: 100%;
            height: 100vh;
            box-sizing: border-box;
        }
        .top-btns{
            width: 100%;
            height: 50px;
            display: flex;
            justify-content: space-around;
            padding: 5px 8px;
        }
        .top-btns > button{
            outline: none;
            padding: 3px 12px;
            border-radius: 8px;
            box-shadow: 0 1px 10px 2px #eeefff;
            border: 0;
            background-color: rgb(209, 165, 251);
        }
        .top-btns > button:hover{
            cursor: pointer;
            box-shadow: 0 1px 5px .5px #cacaca;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="top-btns">
            <button>btn A</button>
            <button>btn B</button>
        </div>
    </div>
</body>
</html>

在这里可以切换插件的侧边栏，当前只有一个插件（就是现在这个插件）提供了侧边栏服务，所以没有其他可以切换。

10、添加并处理侧边栏元素事件

在 sidebar.html 文件中添加 script 标签，引入script 脚本处理侧边栏事件：

<script src="./index.js"></script>

在 index.js 文件中，为两个按钮添加点击事件。当点击第一个按钮后，操作鼠标在当前浏览的页面中滑动，当鼠标悬浮在某元素上时，为该元素进行高亮描边。当点击第二个按钮时，取消该事件，操作鼠标在网页上滑动时，悬浮在某元素上，元素的 border 不再改变。

// 获取到两个按钮
const btns = document.querySelectorAll('.top-btns button');

// 获取当前激活的标签页面
browser.tabs.query({active: true, currentWindow: true}).then((logTabs,onError)=>{
    // 然后往当前页面中注入内容脚本，就行操作当前页面一样
    browser.tabs.executeScript({
        code:`
            // 将函数挂在window身上，可以让下次注入的脚本共享此函数
            window.mouseOverFunc = (e) => {         // 鼠标悬浮
                let target = e.target;
                target.style.border= '3px ridge red';    // 当前鼠标悬浮的元素描边
            }
            window.mouseOutFunc = (e) => {          // 鼠标离开
                let target = e.target;
                target.style.border = '';
            }
        `
    })
})

// 点击第一个按钮 开启悬浮高亮
btns[0].addEventListener('click',()=>{
    browser.tabs.query({active: true, currentWindow: true}).then((logTabs,onError)=>{
        browser.tabs.executeScript({
            code:`
                // 注入的脚本可以共享 mouseOverFunc、mouseOutFunc 函数
                document.addEventListener('mouseover', mouseOverFunc)
                document.addEventListener('mouseout', mouseOutFunc)
            `
        })
    })
})

// 点击第二个按钮取消悬浮高亮
btns[1].addEventListener('click',()=>{
    browser.tabs.query({active: true, currentWindow: true}, tabs => {
        // 为当前窗口注入脚本
        browser.tabs.executeScript({code: `
            // 移除鼠标悬浮和离开的border
            document.removeEventListener('mouseover',mouseOverFunc);
            document.removeEventListener('mouseout',mouseOutFunc);
        `});
    });
})

11、通过右键菜单来取消事件

继续在 index.js 文件中增加代码：

// 创建右键菜单选项，用于停止选择
browser.contextMenus.create({
    id: "stop-select-element",              // id在菜单中唯一
    title: "stop select element",           // 名称
    contexts: ["page", "selection", "link"]     // 在哪些情况下有该选项
});
// 监听右键菜单选项被点击
browser.contextMenus.onClicked.addListener((info,tab)=>{
    // 判断是否执行
    if(info.menuItemId === 'stop-select-element'){
        // 注入脚本，移除事件监听器
        browser.tabs.query({active:true, currentWindow:true}).then(()=>{
            browser.tabs.executeScript({
                code:`
                    document.removeEventListener('mouseover',mouseOverFunc);
                    document.removeEventListener('mouseout',mouseOutFunc);
                `
            })
        })
    }
})

12、参考

你的第一个拓展 - Mozilla | MDN

本文链接：https://blog.csdn.net/hao_13/article/details/130979265

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

分布式光纤传感器的全球与中国市场2022-2028年：技术、参与者、趋势、市场规模及占有率研究报告_预计2026年中国分布式传感器市场规模有多大-程序员宅基地

文章浏览阅读3.2k次。本文研究全球与中国市场分布式光纤传感器的发展现状及未来发展趋势，分别从生产和消费的角度分析分布式光纤传感器的主要生产地区、主要消费地区以及主要的生产商。重点分析全球与中国市场的主要厂商产品特点、产品规格、不同规格产品的价格、产量、产值及全球和中国市场主要生产商的市场份额。主要生产商包括：FISO TechnologiesBrugg KabelSensor HighwayOmnisensAFL GlobalQinetiQ GroupLockheed MartinOSENSA Innovati_预计2026年中国分布式传感器市场规模有多大

07_08 常用组合逻辑电路结构——为IC设计的延时估计铺垫_基4布斯算法代码-程序员宅基地

文章浏览阅读1.1k次，点赞2次，收藏12次。常用组合逻辑电路结构——为IC设计的延时估计铺垫学习目的：估计模块间的delay，确保写的代码的timing 综合能给到多少HZ，以满足需求！_基4布斯算法代码

OpenAI Manager助手（基于SpringBoot和Vue）_chatgpt网页版-程序员宅基地

文章浏览阅读3.3k次，点赞3次，收藏5次。OpenAI Manager助手（基于SpringBoot和Vue）_chatgpt网页版

关于美国计算机奥赛USACO，你想知道的都在这_usaco可以多次提交吗-程序员宅基地

文章浏览阅读2.2k次。USACO自1992年举办，到目前为止已经举办了27届，目的是为了帮助美国信息学国家队选拔IOI的队员，目前逐渐发展为全球热门的线上赛事，成为美国大学申请条件下，含金量相当高的官方竞赛。USACO的比赛成绩可以助力计算机专业留学，越来越多的学生进入了康奈尔，麻省理工，普林斯顿，哈佛和耶鲁等大学，这些同学的共同点是他们都参加了美国计算机科学竞赛（USACO)，并且取得过非常好的成绩。适合参赛人群USACO适合国内在读学生有意向申请美国大学的或者想锻炼自己编程能力的同学，高三学生也可以参加12月的第_usaco可以多次提交吗

MySQL存储过程和自定义函数_mysql自定义函数和存储过程-程序员宅基地

文章浏览阅读394次。1.1 存储程序1.2 创建存储过程1.3 创建自定义函数1.3.1 示例1.4 自定义函数和存储过程的区别1.5 变量的使用1.6 定义条件和处理程序1.6.1 定义条件1.6.1.1 示例1.6.2 定义处理程序1.6.2.1 示例1.7 光标的使用1.7.1 声明光标1.7.2 打开光标1.7.3 使用光标1.7.4 关闭光标1.8 流程控制的使用1.8.1 IF语句1.8.2 CASE语句1.8.3 LOOP语句1.8.4 LEAVE语句1.8.5 ITERATE语句1.8.6 REPEAT语句。_mysql自定义函数和存储过程

半导体基础知识与PN结_本征半导体电流为0-程序员宅基地

文章浏览阅读188次。半导体二极管——集成电路最小组成单元。_本征半导体电流为0

随便推点

【Unity3d Shader】水面和岩浆效果_unity 岩浆shader-程序员宅基地

文章浏览阅读2.8k次，点赞3次，收藏18次。游戏水面特效实现方式太多。咱们这边介绍的是一最简单的UV动画（无顶点位移），整个mesh由4个顶点构成。实现了水面效果（左图），不动代码稍微修改下参数和贴图可以实现岩浆效果（右图）。有要思路是1，uv按时间去做正弦波移动2，在1的基础上加个凹凸图混合uv3，在1、2的基础上加个水流方向4，加上对雾效的支持，如没必要请自行删除雾效代码(把包含fog的几行代码删除)S..._unity 岩浆shader

广义线性模型——Logistic回归模型（1）_广义线性回归模型-程序员宅基地

文章浏览阅读5k次。广义线性模型是线性模型的扩展，它通过连接函数建立响应变量的数学期望值与线性组合的预测变量之间的关系。广义线性模型拟合的形式为：其中g(μY)是条件均值的函数（称为连接函数）。另外，你可放松Y为正态分布的假设，改为Y 服从指数分布族中的一种分布即可。设定好连接函数和概率分布后，便可以通过最大似然估计的多次迭代推导出各参数值。在大部分情况下，线性模型就可以通过一系列连续型或类别型预测变量来预测正态分布的响应变量的工作。但是，有时候我们要进行非正态因变量的分析，例如：（1）类别型.._广义线性回归模型

HTML+CSS大作业环境网页设计与实现(垃圾分类) web前端开发技术 web课程设计网页规划与设计_垃圾分类网页设计目标怎么写-程序员宅基地

文章浏览阅读69次。环境保护、保护地球、校园环保、垃圾分类、绿色家园、等网站的设计与制作。总结了一些学生网页制作的经验：一般的网页需要融入以下知识点：div+css布局、浮动、定位、高级css、表格、表单及验证、js轮播图、音频视频 Flash的应用、ul li、下拉导航栏、鼠标划过效果等知识点，网页的风格主题也很全面：如爱好、风景、校园、美食、动漫、游戏、咖啡、音乐、家乡、电影、名人、商城以及个人主页等主题，学生、新手可参考下方页面的布局和设计和HTML源码（有用点赞△）一套A+的网_垃圾分类网页设计目标怎么写

C# .Net 发布后,把dll全部放在一个文件夹中,让软件目录更整洁_.net dll 全局目录-程序员宅基地

文章浏览阅读614次，点赞7次，收藏11次。之前找到一个修改 exe 中 DLL地址的方法, 不太好使,虽然能正确启动, 但无法改变 exe 的工作目录,这就影响了.Net 中很多获取 exe 执行目录来拼接的地址 ( 相对路径 ),比如 wwwroot 和代码中相对目录还有一些复制到目录的普通文件等等,它们的地址都会指向原来 exe 的目录, 而不是自定义的 “lib” 目录,根本原因就是没有修改 exe 的工作目录这次来搞一个启动程序,把 .net 的所有东西都放在一个文件夹,在文件夹同级的目录制作一个 exe._.net dll 全局目录

BRIEF特征点描述算法_breif description calculation 特征点-程序员宅基地

文章浏览阅读1.5k次。本文为转载，原博客地址：http://blog.csdn.net/hujingshuang/article/details/46910259简介 BRIEF是2010年的一篇名为《BRIEF:Binary Robust Independent Elementary Features》的文章中提出，BRIEF是对已检测到的特征点进行描述，它是一种二进制编码的描述子，摈弃了利用区域灰度..._breif description calculation 特征点

房屋租赁管理系统的设计和实现，SpringBoot计算机毕业设计论文_基于spring boot的房屋租赁系统论文-程序员宅基地

文章浏览阅读4.1k次，点赞21次，收藏79次。本文是《基于SpringBoot的房屋租赁管理系统》的配套原创说明文档，可以给应届毕业生提供格式撰写参考，也可以给开发类似系统的朋友们提供功能业务设计思路。_基于spring boot的房屋租赁系统论文