Chrome扩展自定义脚本操作浏览器内容

  • Z时代
  • 2024-01-10
  • 分类：综合

编程

工作中，经常碰到，浏览的网站内容，有些功能不支持，或者呢，想自己个性化增加些内容等等。比如，我司有很多内部技术网站，比如部署系统、服务器运维系统、日志监控系统、统一监控系统等。在部署系统操作部署上线时，需先将服务操作下线，而后日志监控系统观察流量日志，直至无日志后才可以进行下一步的灰度上线。此时呢，我们需要在操作服务下线的服务器中随机选择几台，而后去日志监控系统，选择上线的系统应用，再输入刚刚复制的IP地址，观察实时日志。这样操作起来非常的麻烦！不停的切换窗口不说，还得复制粘贴。每次上线搞的非常的疲惫。

作为技术人，我们就是要“懒“，怎么舒服怎么来。本人自行写了扩展，在部署系统增加了一个悬浮球，在操作服务下线后，点击下悬浮球即可自动在新窗口打开日志监控系统，并自动选择系统应用和输入IP地址，监控实时日志。这样下来就简单很多啦！此时，就使用了本篇要介绍的内容-使用自定义脚本来操纵浏览器内容。

我们就拿开源中国网站首页发布动弹来作为例子。动弹支持使用组合键： ctrl + enter 或者 cmd + enter,来发送动弹。我们增加个功能，在我输入动弹内容后，按住enter 来代替 点击动弹按钮，发送动弹内容。当然，enter一般是用来内容换行的。

第一步，编写manifest.json文件。

这次我们使用content_scripts功能。内容如下：

{
    "manifest_version": 2,
    "name": "开源中国发布动弹",
    "version": "1.0",
    "description": "支持使用enter发布动弹内容",
    "content_scripts": [
        {
            "matches": ["*://oschina.net/"],
            "all_frames": true,
            "js": ["js/jquery.min.js","js/oschina.js"]
        }
    ]
}

简单介绍下几个重要属性：

属性

说明

备注

matches

定义哪些URL注入自定义的脚本

可多个进行匹配，并支持正则表达式

all_frames

是否对网页内的iframe注入脚本

当我们要操作的内容是网页内的某个iframe中的内容是，很管用

js

自定义的脚本

支持多个，路径为相对于manifest.json文件的路径

我们定义了匹配条件：开源中国首页URL，同时，我们引入了jquery和自定义的脚本。在此需着重说明：

content_scripts中的脚本只是共享页面的DOM（DOM中的自定义属性不会被共享），并不共享页面内嵌Javascript的命名空间。也就是说，如果当前页面中的Javascript有一个全局变量a，content_scripts中注入的脚本也可以有一个全局变量a，两者不会相互干扰。当然你也无法通过content_scripts访问页面本身内嵌Javascript的变量和函数。

还有一些其他的属性，简单来看下：

属性

说明

备注

css

注入的css文件

支持多个，同js属性

exclude_matches

排除匹配

同 matches

include_globs

在匹配matches后，继续匹配此属性，包含

exclude_globs

在匹配matches后，继续匹配此属性，排除

继续编写我们的脚本内容，我们先打开chrome控制台，使用检查元素，找到动弹输入框和动弹按钮。

1处为动弹输入框，2处为动弹按钮。

第二步，编写JS脚本。

var dongdan_content = $("#tweetWidgetForm > div > div.tweet-editor > textarea")
var dongdan_button = $("#tweetWidgetForm > div > div.tweet-editor > button")
dongdan_content.keypress(function(e){
    var keyCode = e.keyCode || e.which || e.charCode
        if( keyCode == 13) {
            dongdan_button.click()
            e.preventDefault()
            return false
        }
})

至此，大功搞成！

Chrome的强大之处就在于此！

参考文档：https://developer.chrome.com/extensions/content_scripts 未翻墙的同学可查看这里：https://gitee.com/838900801/Chrome-extensions 我已经将官网的文档导出为PDF文件。

欢迎关注我的公众号： 张恒强的学习笔记

以上是 Chrome扩展自定义脚本操作浏览器内容 的全部内容， 来源链接： utcz.com/z/514243.html

回到顶部