chrome插件开发实例02-使用content_scripts对用户浏览页面操作

已于 2023-08-04 17:31:25 修改
阅读量1.2k 收藏
点赞数
分类专栏： chrome 插件测试开发 文章标签： chrome 前端 chrome插件开发 前端开发
于 2023-08-04 17:30:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/huazhongkejidaxuezpp/article/details/132107821
版权
本文介绍了一个Chrome插件开发实例，通过content_scripts对用户浏览页面进行操作，包括动态显示预设文案、添加自定义按钮以及改变页面背景颜色。详细讲解了manifest.json和content_scripts.js的配置及功能，提供了完整的源代码。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

目录

引言

chrome插件

插件演示

源代码

manifest.json

content_scripts.js

css设置(放在css文件夹下)

引言

        chrome插件开发实例实现中，将穿插chrome插件开发理论知识的讲解， 立刻上手开始吧。

chrome插件

        基于chrome插件，自定义修改当前浏览页面的内容：

修改1： 让所有浏览的页面上都动态显示预设文案

修改2： 在浏览页面上新增一个【自定义按钮】，点击按钮，可以动态显示预设文案

修改3： 修改页面的背景颜色

插件演示

chrome插件02_哔哩哔哩_bilibili基于chrome插件，自定义修改当前浏览页面的内容：修改1： 让所有浏览的页面上都动态显示预设文案修改2： 在浏览页面上新增一

了解本专栏 订阅专栏 解锁全文 超级会员免费看
chrome插件开发实例04-智能收藏夹
我的E家
08-07 468
基于chrome插件，实现了简单收藏夹的功能： 功能1：网址智能排序(某网址打开次数越多，排名越靠前)； 功能2：直接获取当前页面网站信息； 功能3： 自由自定义添加常用网址； 功能4：可以恢复默认的网址； 功能5：可以全部清空网址； 功能6：自由删除某个不用的网址；
chrome插件开发实例03-使用 chrome.storage API永久保存数据
我的E家
08-06 2115
chrome插件开发： 功能1： 自由自定义添加热词； 功能2：可以恢复系统默认的热词； 功能3：可以全部清空热词；
Chrome浏览器扩展开发系列之十二：Content Scripts
weixin_30924087的博客
09-28 939
Content Scripts是运行在Web页面的上下文的JavaScript文件。通过标准的DOM，Content Scripts 可以操作（读取并修改）浏览器当前访问的Web页面的内容。 Content Scripts通常用于如下场景： 找到Web页面中的无效链接并修复 增大字体以突出显示 查找并处理DOM中的microformat Content Scripts的使用限制...
#Chrome扩展程序开发教程--06：Content scripts
投笔丶从戎的博客
04-22 3595
Content scripts 是注入到网页中运行的 JavaScript 文件。它可以使用标准的 Document Object Model（DOM）对象来访问网页中内容并对其进行修改。由于安全等原因 content scripts 的运行环境和网页内容本身是隔离的，也就是说网页本身所创建对象和函数，在 content scripts 中是无法访问的，反之亦然。
chrome扩展之content scripts与web pages 交互
abu2015的博客
07-05 2083
严重吐槽一下CSDN的blog，卧槽，我好不容易写完一篇，点完发表之后就一直loading，然后就让我登陆，然后就特么什么都没有了！！！！！ 好了，重新写一遍吧。
谷歌浏览器插件content_scripts、background、popup通信
qq_25919495的博客
05-25 1万+
前期页面准备 manifest.json| content_scripts : 浏览器里面使用的,和页面共享DOM,不共享JS content-scripts不能访问绝大部分chrome.xxx.api，除了下面这4种： chrome.extension(getURL , inIncognitoContext , lastError , onRequest , sendRequest) chrome.i18n chrome.runtime(connect , getManifest , ge.
Chrome 插件 V3 版本 Manifest.json 中的内容脚本（Content Scripts）解析
guoqkmiss的博客
01-15 2724
Chrome 插件 V3 版本 Manifest.json 中的内容脚本（Content Scripts）解析
Chrome插件笔记之content_scripts
weixin_30875157的博客
08-08 655
一、概论 说这个之前先看一个段子，讲的是甲方有一奇葩客户，这客户看一网站某些样式很别扭不得劲，非要让乙方修改，乍一听没毛病，但关键是这网站不是乙方家的，根本没有修改权限，怎么办，客户就是上帝，上帝的要求怎么好拒绝，这时候乙方就有一神人挺身而出，写了一个修改页面样式的浏览器插件给客户装上，这样客户只要开着这个插件浏览那个网站看到的就是自己想看到的样式。其实原理就相当于将网页html下载...
chrome浏览器插件开发--如何在content_scripts的js中使用插件的本地图片
最新发布
前端笔记——放弃很容易,但坚持一定很酷
08-21 1119
在浏览器插件（如Chrome扩展、Firefox插件等）中，`content_scripts` 是一种强大的功能，它允许插件开发者向正在浏览的网页中注入JavaScript、CSS等文件。2、在pick.js中使用 chrome.runtime.getURL() 获取到图片的url路径。比如我这里`content_scripts`配置的是pick.js，但是发现在pick.js无法直接访问到插件项目里的本地图片资源。这样就可以在页面创建的dom中设置本地图片的背景图了。
Chrome插件小实例--定时刷新当前页面
zjp1995的博客
01-29 3521
最近工作上有一个需要每天爬取某个网站登录之后的页面信息,但是网站有一定的反爬机制,无法使用python模拟用户名登录,每次都是页面登录后复制cookie到代码中模拟登录信息进行数据爬取. 这么做的缺点就是每天进行数据抓取前,必须先打开浏览器登录–F12打开控制台–找到请求的cookie-- 复制并粘贴到代码中. 如果浏览器能保持用户登录状态,那么就不用每天换cookie,直接运行爬虫代码就好了! 1. 准备工具 1 :一台不关机的电脑(我的是阿里云),用于保持用户的登录状态 2 :开发一个chrome插件,
chrome插件开发实例06-定制自己的Chrome DevTools调试工具
我的E家
08-07 792
面板显示任意页面的请求信息, 拦截 请求的URL，参数，method，返回体信息
chrome 插件:content-script 部分逻辑在页面无法生效,可考虑插入 script 到页面上
汤一飞
07-25 885
插入代码到页面具体方法, 参考该插件, 单独弄一个可独立运行的 js 文件, 打包好, content-script 里使用 chrome.extension.getURL 获取此 js 的地址, 生成 script , 指定地址, 加载。原理不清楚, 可能 content-script 运行的环境跟 script 运行的环境不同导致的吧, 从控制台里打印的语句也能看出来, 控制台也分了层级, 默认当前页面, 底下还有各种插件的控制台。
Chrome 扩展开发教程(3)——content_scripts用法
热门推荐
如果我年少有为不自卑
12-14 1万+
原文：http://www.dahouduan.com/2017/08/15/chrome-extension-content-scripts/ 前面两章我们介绍了弹窗 popup 和 background的用法 这篇来介绍下 conent_scripts 的用法。Content_scripts 简介假如你想把访问到的页面里的图片都加上好看的边框你该怎么做？用目前学习的东西，你是无法实现这个功能
谷歌浏览器插件content_scripts、background、popup之间的通信
guoqkmiss的博客
12-04 7032
谷歌浏览器插件content_scripts、background、popup之间的通信 1、content_scripts和background的通信 接收消息：chrome.runtime.onMessage.addListener 发送消息：chrome.runtime.sendMessage 我们先在content_scripts里面加一个按钮，用来触发事件 contentJs/index.js //contentJs/index.js const but2 = $('<button
折腾Chrome插件，让内容脚本与文本交互~
青玉白露的博客
02-27 2316
我们要用内容脚本（content scripts）来给插件装上一双慧眼，让它能在你浏览的页面上跳来跳去，和文字做游戏。这就像给插件喂了一颗智慧豆，让它变得聪明起来，能够直接和网页内容打招呼啦！在本章，我们将介绍如何通过内容脚本(content scripts)增强“智能笔记”插件的页面交互功能。内容脚本的作用是在用户浏览的页面上执行脚本，让我们的插件能够直接与页面内容交互。
chrome浏览器插件content.js和background.js还有popup都是什么，怎么通讯
03-06 6274
在用户点击扩展程序图标时（下图中的下载图标），都可以设置弹出一个popup页面。而这个页面中自然是可以包含运行的js脚本的（比如就叫popup.js）。它会在每次点击插件图标——popup页面弹出时，重新载入。
Chrome 56 扩展开发入门：Content Scripts
小小木屋
04-06 1289
Content Scripts 是在 Web 页面内运行的 Javascript 脚本。通过使用标准的 DOM，可以获取浏览器所访问页面的详细信息，并可以修改这些信息。文件列表+ chrome56-extension-contentscripts icon.png manifest.json content.jsmanifest.json内容如下：{ "nam
开发 Chrome 浏览器插件入门
aicsswo的博客
04-27 1万+
简介Chrome 插件是扩展 Chrome 浏览器的功能的软件程序。它们可以执行各种任务，例如阻止广告、增强隐私、添加新功能等等。要开始编写 Chrome 插件，你需要掌握以下：1.JavaScript语言2.html3.css4.会使用chrome扩展开发手册。
Chrome的Content Scripts扩展开发
The CSDN Blog With Matol Poet !
10-13 2357
这篇博客以讲解Chrome的Content Scripts扩展开发过程为主，并在该过程中穿插与Greasemonkey用户脚本的比较。本人初次尝试Content Scripts类型的扩展，有不足之处，请不吝指出。 前言 现在使用Chrome浏览器的用户越来越多，在写用户脚本的时候有时候必须得同时考虑多个浏览器的兼容情况(当然比起前端开发要简单多了)。我一般仅考虑Firefox和Chro
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

多则惑少则明

你的鼓励将是我创作的最大动力

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

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

打赏作者

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

抵扣说明：

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

余额充值