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

原创
2020/03/08 21:15
阅读数 800

上一篇简单介绍了下Chrome扩展开发的基础知识,详情参考:Chrome扩展-Hello World。本篇将简单介绍下如何通过扩展操作浏览器的内容。

工作中,经常碰到,浏览的网站内容,有些功能不支持,或者呢,想自己个性化增加些内容等等。比如,我司有很多内部技术网站,比如部署系统、服务器运维系统、日志监控系统、统一监控系统等。在部署系统操作部署上线时,需先将服务操作下线,而后日志监控系统观察流量日志,直至无日志后才可以进行下一步的灰度上线。此时呢,我们需要在操作服务下线的服务器中随机选择几台,而后去日志监控系统,选择上线的系统应用,再输入刚刚复制的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文件。

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

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部