chrome插件开发——option(选项页)的通信

chrome插件开发中的options页,就是插件的设置页面,有2个入口,一个是右键图标有一个“选项”菜单,还有一个在插件管理页面:
这里写图片描述
这里写图片描述
要想在插件中开启这个功能需要在配置页中进行配置,浏览器版本不同,配置的方法也不同

manifest.json

// Chrome40以前的插件配置页写法
"options_page": "options.html",
// Chrome40以后的插件配置页写法,如果2个都写,新版Chrome只认后面这一个
"options_ui":
{
    "page": "options.html",
    // 添加一些默认的样式,推荐使用
    "chrome_style": true
},

此时,我们创建一个options.html后,就有了一个options页面,可以在右击图标或者在插件详情页中开启该选项页了

假设我需要实现一个功能,在选项页中能够对页面的文字格式进行更改,就需要options发出请求给content_script.js,与content_script.js进行通信。

但是我发现options不能直接和content_script页面进行通信,因为content_script并不在当前开启的页面中,所以我们需要一个中间载体,background,background可以理解和popup一样,只是popup页面只有在点击图标的时候才会触发出来,否则是不会开启的,而background则是一直在后台运行的。

开启background也需要在manifest.json中进行配置

"background":
    {
        // 2种指定方式,如果指定JS,那么会自动生成一个背景页。选其中一个即可,如果都开启会报错
        // "page": "background.html",
        "scripts": ["js/background.js"]
    },

options.html

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            body{
                border-top: 1px solid #000;
            }
            button
  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值