谷歌插件开发（2）-修改百度页面

最新推荐文章于 2025-07-04 13:30:58 发布

原创最新推荐文章于 2025-07-04 13:30:58 发布 · 1.2k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #html #javascript #插件 #谷歌

谷歌插件开发专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何在谷歌插件开发中动态修改百度页面，通过注入JavaScript文件，利用jQuery库简化操作。首先完成js文件的注入，接着提供jQuery库下载建议，最后展示index.js中的核心代码。

在第一个讲中，没有涉及到动态修改页面的东西，也就是没有在页面中同时注入自己的js文件。在开发插件中，为了更好的去开发，我这里采用jq库来开发，原生代码的话比较麻烦，要写的东西比较多。这里要介绍的是

"content_scripts":[
            {
                "matches":["https://www.baidu.com/*"],
                "js":["jquery-3.1.1.min.js","index.js"]
            }
        ]

这个Manifest.json要添加的，是注入js代码的。matches：表示我要注入代码的页面在哪里，这里以百度为例子来讲。必须要填，不然不知道要在什么页面注入代码。js：这个就是我们要注入的js代码的路径。

这样子，我们就完成了插件的js文件注入了。接着我们就要为其写代码了。jq的库文件网上很多，百度jq下载一大堆，自己搞定。然后就是index.js了。上代码：

function init(){
    
    var Font = $("<center id='lg'>好好学习</center>").css({"color":"red","font-size":"40px","padding":"60px"});
    $("#su").val("梧桐一下");
    $("#s_form_wrapper").append(Font);
}
init();

这里就是新建一个center的标签，然后赋css样式。然后就是F12了。在百度首页里F12，然后点