chrome扩展程序开发之在目标页面运行自己的JS

原文地址:https://qdgithub.com/home/index/article/aid/247.html

chrome 插件开发的入门介绍,实现利用 chrome 扩展实现在目标网页运行我们的 js 的功能。关于 chrome 扩展的详细内容,可以通过官网了解。

开发工具很简单,记事本就 OK 了,当然还要有一个 chrome 浏览器。

新建一个文件夹,比如,HelloWorld

然后创建一个文本文件,作为这个扩展程序的配置文件,所以文件名是 manifest.json,注意扩展名是 json,然后输入如下内容。

{ "name": "first chrome plugin", "manifest_version": 2, "version": "1.0", "description": "good", "browser_action": { "default_icon": "1.png" },"permissions": ["tabs", "http://*/*","https://*/*"],"content_scripts": [ { "matches": ["https://www.baidu.com/*"], "js": ["myscript.js"] } ] 
}

1.png 的话,随便拖一张图片进来就 OK 啦。另外需要注意的是,该文本文件需要用 UTF8 字符集保存。

现在让我们把 helloworld 添加进去。在 manifest 文件里有几行这样的代码。

"content_scripts": [{"matches": ["http://www.baidu.com/*"],"js": ["myscript.js"]}]

注意跟之前的代码用逗号分割开。

可以看到我们新增了一个内容,就是 content_scripts,详细的介绍应该去看官方文档,我在这里简要介绍下,content_scripts 是运行在打开页面的脚本,可以拿到整个页面的 DOM 对象,所以可以利用该脚本对页面进行操作。

新建一个 js 文件 myscript.js,里边代码很简单。注意该文件为utf-8编码

alert("HelloWorld");
document.body.style.backgroundColor="gray";

在扩展程序页面重新加载插件,就可以去看效果了。

当我打开百度的时候,Oh,my god!

参考链接

chrome extensions

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/579826.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

[spark] DataFrame 的 checkpoint

在 Apache Spark 中,DataFrame 的 checkpoint 方法用于强制执行一个物理计划并将结果缓存到分布式文件系统,以防止在计算过程中临时数据丢失。这对于长时间运行的计算过程或复杂的转换操作是有用的。 具体来说,checkpoint 方法执行以下操作&…

从AMI镜像恢复AWS Amazon Linux 2实例碰到的VNC服务以及Chrome浏览器无法启动的问题

文章目录 小结问题及解决VNC服务无法启动Chrome浏览器无法启动 参考 小结 将Amazon Linux 2保存为AMI (Amazon Machine Images)后,恢复成EC2 Instance (实例)后,VNC服务以及Chrome浏览器无法启动,进行了解决。 问题及解决 如果要将一个EC2…

treeview数据的保存和读取(以表格方式保存)

一个简单的treeivew,以表格方式保存比较简单,遍历所有节点,记录parentNode、node、data即可 parentiddataid002xx2001005xx5000003xx3001006xx6002007xx7001000xx0001001xx1-1004xx4007 如何将表格转为tree数据,代码如下&#xf…

数据结构-十大排序算法

数据结构十大排序算法 十大排序算法分别是直接插入排序、折半插入排序、希尔排序、冒泡排序、快速排序、简单选择排序、堆排序、归并排序、基数排序、外部排序。 其中插入排序包括直接插入排序、折半插入排序、希尔排序;交换排序包括冒泡排序、快速排序&#xff1…

LSTM中文新闻分类源码详解

LSTM中文新闻分类 一、导包二、读取数据三、数据预处理1.分词、去掉停用词和数字、字母转换成小写等2.新闻文本标签数值化 三、创建词汇表/词典1.data.Field()2.空格切分等3.构建词汇表/词典使用训练集构建单词表,vectorsNone:没有使用预训练好的词向量,而是使用的是…

阿里云自建官方Docker仓库镜像提交拉取方法

文章目录 发布镜像到DockerHub发布镜像到自建Docker仓库(Harbor)修改配置文件在Linux服务器中登录Docker打TAGPUSH提交镜像PULL拉取镜像 发布镜像到阿里云容器服务在Linux服务器中登录DockerPUSH提交镜像PULL拉取镜像 发布镜像到DockerHub 本地我们镜像命名可能会不规范&#…

详解Keras3.0 Layer API: LSTM layer

LSTM layer 用于实现长短时记忆网络,它的主要作用是对序列数据进行建模和预测。 遗忘门(Forget Gate):根据当前输入和上一个时间步的隐藏状态,计算遗忘门的值。遗忘门的作用是控制哪些信息应该被遗忘,哪些…

kotlin by lazy 的使用

by lazy 的作用 by 是在kotlin中代表者委托, lazy 懒加载 by lazy 就是委托延时处理 下面写一个demo说明下 新建一个类 class ExportController {fun getName(): String? {return "name";}fun getAge(): Int {return 18;}} 在mian中如下 class Ma…

C语言中的结构体和联合体:异同及应用

文章目录 C语言中的结构体和联合体:异同及应用1. 结构体(Struct)的概述代码示例: 2. 联合体(Union)的概述代码示例: 3. 结构体与联合体的异同点相同点:不同点:代码说明 结…

C++面试宝典第10题:绘制各种图形

题目 我们需要编写一个图形相关的应用程序,并处理大量图形(Shape)信息,图形有矩形(Rectangle)、正方形(Square)、圆形(Circle)等种类。应用程序需要计算这些图形的面积,并且可能需要在某个设备上进行显示(使用在标准输出上打印信息的方式作为示意)。 (1)请使用面…

华为——使用ACL限制内网主机访问外网网站示例

组网图形 图1 使用ACL限制内网主机访问外网网站示例 ACL简介配置注意事项组网需求配置思路操作步骤配置文件 ACL简介 访问控制列表ACL(Access Control List)是由一条或多条规则组成的集合。所谓规则,是指描述报文匹配条件的判断语句&#…

Python技能手册 - 模块module

目录 内置排序 列表排序 元组排序 字符串排序(按长度) 字符串排序(按字典序) 类排序 Lambda表达式排序 copy 浅拷贝 copy.copy 深拷贝 copy.deepcopy heapq 创建(小顶)堆 heapq.heappush 获取…

Spring系列:基于Spring-Jdbc实现事务

文章目录 一、事务基本概念二、编程式事务三、声明式事务前期准备 四、基于注解的声明式事务Transactional注解标识的位置事务属性:只读事务属性:超时事务属性:回滚策略事务属性:隔离级别事务属性:传播行为测试 五、基…

大数据开发之Sqoop详细介绍

测试环境 CDH 6.3.1 Sqoop 1.4.7 一.Sqoop概述 Apache Sqoop(SQL-to-Hadoop)项目旨在协助RDBMS与Hadoop之间进行高效的大数据交流。用户可以在 Sqoop 的帮助下,轻松地把关系型数据库的数据导入到 Hadoop 与其相关的系统 (如HBase和Hive)中&…

IRIS、Cache系统类汉化

文章目录 系统类汉化简介标签说明汉化系统包说明效果展示类分类%Library包下的类重点类非重点类弃用类数据类型类工具类 使用说明 系统类汉化 简介 帮助小伙伴更加容易理解后台系统程序方法使用,降低代码的难度。符合本土化中文环境的开发和维护,有助于…

年底大厂今年发多少年终奖,怎么发(上)?

马上就2023年年底了,互联网大厂腾讯员工首先,发年终奖了,111354 元! 腾讯的同学可以查一查了,应该发多少已经定下来了!👋 除此之外,千寻找了很多的大厂的年终奖发放时间,…

k8s搭建(一、环境配置与docker安装)

天行健,君子以自强不息;地势坤,君子以厚德载物。 每个人都有惰性,但不断学习是好好生活的根本,共勉! 文章均为学习整理笔记,分享记录为主,如有错误请指正,共同学习进步。…

SpringBoot3 整合Redis

1. 场景整合 依赖导入 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-redis</artifactId> </dependency>配置 spring.data.redis.host192.168.200.100 spring.data.redis.passwordLfy…

Android Studio 如何隐藏默认标题栏

目录 前言 一、修改清单文件 二、修改代码 三、更多资源 前言 在 Android 应用中&#xff0c;通常会有一个默认的标题栏&#xff0c;用于显示应用的名称和一些操作按钮。但是&#xff0c;在某些情况下&#xff0c;我们可能需要隐藏默认的标题栏&#xff0c;例如自定义标题栏…

时序预测 | Matlab实现SSA-CNN-LSTM麻雀算法优化卷积长短期记忆神经网络时间序列预测

时序预测 | Matlab实现SSA-CNN-LSTM麻雀算法优化卷积长短期记忆神经网络时间序列预测 目录 时序预测 | Matlab实现SSA-CNN-LSTM麻雀算法优化卷积长短期记忆神经网络时间序列预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 MATLAB实现SSA-CNN-LSTM麻雀算法优化卷积长短…