【chorme插件开发】第五节：纯js实现的功能插件实例

最新推荐文章于 2024-06-01 09:46:09 发布
最新推荐文章于 2024-06-01 09:46:09 发布
阅读量250 收藏
点赞数 1
CC 4.0 BY-SA版权
分类专栏： 应用开发实例教程
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/hj960511/article/details/103634036
本文介绍如何使用纯JavaScript开发Chrome功能插件，包括详细的插件结构解析，manifest.json配置说明，以及bg.js文件的主要代码内容。

纯js实现的功能插件
插件结构：

bg.js
manifest.json

manifest.json文件配置

{
"manifest_version":2,
"name":"one-click hello_world",
"description":"my first chrome extension-background",
"version":"1.0",
"permissions":[
    "tabs",
    "https://*/*",
    "http://*/*"
    ],
"background": {
    "scripts": ["bg.js"],
    "persistent": false
  }
}

图片素材：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

bg.js文件代码

console.log("backgr
了解本专栏 订阅专栏 解锁全文 超级会员免费看
【chorme插件开发】第四节：html+js实现的功能插件开发实例
任聪聪的博客
12-20 308
###html+js实现的功能插件开发实例 插件结构 icon.png popup.html popup.js manifest.json manifest.json文件配置 { "manifest_version":2, "name":"纯html展示插件", "description":"这是一个纯html页面", "version":"1.0", "permission...
封装 js 插件 实例
weixin_34050005的博客
12-06 174
2019独角兽企业重金招聘Python工程师标准>>> ...
用javascript实现以下功能!_10 个用纯 Javascript 实现的好用插件 javascript
weixin_39804523的博客
12-03 255
介绍现代 JavaScript 框架使构建复杂的 Web 应用变得非常容易。Vanilla JavaScript 指的是纯 Javascript 代码，没有使用任何框架进行扩展，这在创建小型应用程序时很好用。1. Swiper.jsSwiper 是免费的现代移动触摸滑块控件，具有硬件加速过渡和惊人的原生行为。官网：https://swiperjs.com/2. iTyped简单 Javascrip...
【JavaScript】巩固JS开发中十个常用功能/案例（11-20）（牛客题解）
前端之行，任重道远！
08-16 7502
记录JavaScript开发中常用的十个功能案例，内容基础，简单易学。正可谓基础不牢，地动山摇！快来查看这些基础案例，查漏补缺，巩固基础吧！！！
NPAPI和PPAPI插件开发
跑的比兔子还快的乌龟
12-08 3141
NPAPI和PPAPI开发 Author: kagula Revison: 1 Last modify date：2015-10-20 环境：  [1]Visual Studio 2010 SP1     Visaul Stuio  2013 Update4  [2]Python2.7  [3]Firefox 41.0.1  [4]IE 11  [5]Google ch
工程硕士学位论文 基于Android+HTML5的移动Web项目高效开发探究
02-28
6.3 认我测在线认证检测系统的主要功能实现 36 6.3.1用户查询 36 6.3.2订单操作 37 6.3.3个人信息维护 37 6.4.系统功能测试 38 6.4.1 首页功能模块 38 6.4.2 订单功能模块 38 6.4.3 个人信息模块 39 6.4.4页面自适应...
谷歌浏览器扩展工具：高效管理JSON数据
6. 重要扩展实例："JSON Handle"：从标签"chorme jsonhandle"可以推测，"JSON Handle"可能是一个Chrome扩展，它可能提供了一套完整的功能来处理JSON数据，包括查看、编辑、验证和转换JSON文件等。 7. 扩展安装：...
十四天学会Vue——Vue核心下篇（理论+实战）（第三天）
爱游戏爱学习的博客
06-01 1100
自定义指令有两种形式：函数式、对象式需求一：定义一个v-big指令，和v-text指令功能类似，但会把绑定的数值放大10倍思路：首先验证自定义big指令中，函数的参数表示什么；通过知道第二个参数存放着指令信息，利用bingding参数绑定dom元素和big指令信息展示在页面上。接着探讨big函数合适被调用，通过打印‘’big被调用‘’被输出来体现--准备好一个容器 --><h2>当前的n值是<span v-text="n"></span></h2>
JS常用(通用)功能（插件）
疯狂的简洁
08-22 1377
requireJs 参考地址时间日期插件 My97DatePicker 参考地址(官网)提示框插件 artDialog 参考地址(github)表单验证插件 validform 参考地址(官网)后续补充…
值得H5前端学习的60个JS插件(含DEMO演示)
weixin_42200954的博客
04-16 3042
值得前端学习的60个JS插件
JS小案例总结（JS基础案例）
a_l_f_的博客
08-08 8596
JS小案例总结JS小案例总结案例一：JS实现tab选项卡功能案例二：JS实现盒子拖拽功能案例三：JS实现导航条吸顶效果案例四：JS实现图片懒加载结构案例五：JS实现简易弹幕功能案例六：JS实现自动滚动新闻列表 JS小案例总结 案例一：JS实现tab选项卡功能 描述：纯原生js实现选项卡切换的效果,即当鼠标移入某个选项卡区域时,显示不同的内容。 HTML代码如下： <body> <div id="tabs"> <div id="options">
JS基础小案例
xlecho的博客
03-28 1万+
title: JS基础小案例 date: 2015-12-19 10:28:40 categories: 前端基础总结 tags: 前端 xl_echo编辑整理，欢迎转载，转载请声明文章来源。更多案例、资料请联系QQ：1280023003 图片轮播小案例： &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" ...
js插件开发的一些感想和心得
weixin_30538029的博客
02-04 247
起因 如果大家平时做过一些前端开发方面的工作，一定会有这样的体会：页面需要某种效果或者插件的时候，我们一般会有两种选择：1、上网查找相关的JS插件，学习其用法2、自己造轮子，开发插件。 寻找存在的插件 第一种做法，上网查找JS插件这种方式如果是有刚好符合项目需求的插件，那是非常幸运的事了。但是我相信大部分情况下，我们找到的插件会有下面的几个问题：（1）UI定制：很多插件提供的UI和我们的...
如何修改网页中的文本内容改成自己希望的数值？
热门推荐
任聪聪的博客
12-05 2万+
本篇文章主要讲解，通过浏览器命令和浏览器自带的F12开发者工具，进行修改网页内容的方法教程 日期：2021年12月5日 作者：任聪聪 一、通过F12开发者工具进行修改 进入方式汇总： 1.右击鼠标，显示菜单找到审查 2.通过快捷键F12进入，笔记本需要先关闭fnlk功能键。 开发者工具介绍 说明： 1.表示选择元素，点击后可以选择文本的元素所在地 2.表示显示方式，手机还是电脑 3.表示div元素，点击后可以展开，对div内的html和文本进行编辑。 双击文本，即可进行修改成自己想要的，但是刷新后.
【docker】第三节：nginx通过外部无法访问的情况解决方法。
任聪聪的博客
06-12 9555
教程：解决docker容器内可访问，容器外无法访问的情况。 范围：docker容器 步骤一：检查是否已经启动了nginx，docker ps -a。 步骤二：进入nginx中，docker exec -it 您的ngxin容器名称 bash，使用curl http://localhost:80，进行检查，如果报错cutl 找不到，请先安装下curl。 步骤三：可以看到我们内部访问是可以访问到的，但是通过外部的缺无法访问到，这里我用的是vbox虚拟机，设置了端口转发后即可访问成功，正常环境下的排错方式.
微信小程序流量主提升ecpm的一些方法
任聪聪的博客
01-19 9452
ecpm就是千次广告曝光收入，是一个预估的价格，而不是额定的，他是随着曝光度，用户点击度，页面访问数来决定的。
【C#桌面应用】第二节：利用Visual Studio2019 创建桌面应用
任聪聪的博客
12-23 6003
教程说明： 利用Visual Studio2019 创建桌面应用进行调试 步骤一、打开编辑器 步骤二、点击创建新项目后进行到下一个界面 搜索并查询到如上图的这个选项，也可以进行筛选找到，不过这里的项很多，不太好找，直接搜索就行了。 步骤三、点击一下窗体应用，并点击下一步 这里可以设置项目的名称和相关的目录信息，根据自己的需要进行创建即可。点击创建即创建完成。部分电脑配置低的可能创建要一会...
【原型设计】第一节：Axure RP9 下载安装、汉化和激活使用的方法教程
任聪聪的博客
03-30 5373
本篇文章为axure 的下载安装、汉化包使用下载教程 适用版本：axure rp9 Axure的安装 Axure的官方下载地址：https://www.axure.com/ 步骤一、 登录官网首页，点击download，下载安装包。 点击按钮后会进入到如下页面。 确认下载后，等待下载完毕后进入步骤二操作。 步骤二、 双击安装包，运行安装程序 **步骤三、**点击next， 步骤四、 点击 I accept the terms in the License Agreement,然后继续点击next.
chorme插件开发时,无法获取录音权限
最新发布
09-16
在Chrome插件开发中无法获取录音权限，可从以下方面解决： ### 检查权限声明 确保在`manifest.json`文件中正确声明了`"audioCapture"`权限。示例如下： ```json { "manifest_version": 3, "name": "My Recording ...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符  | 博主筛选后可见
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

任聪聪

创作不易，你的打赏是我的动力！

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值