微信扫一扫 分享朋友圈

已有 1035 人浏览分享

开启左侧

如何做一个csdn浏览器插件

[复制链接]
1035 0
1. 插件的文件结构
主要包括一个文件夹,文件夹命名随意,文件夹下面包括两个文件,分别为manifest.json(这个文件命名不能随意),csdn.js(命名可以随意),如下:
image.png

2. manifest.json文件的代码
参考代码如下:
{
    "manifest_version": 2,
    "name": "csdn",
    "version": "1.0",
    "description": "csdn插件",
    "content_scripts": [{
        "matches": ["https://blog.csdn.net/*/article/details/*",
            "https://*.blog.csdn.net/article/details/*"
        ],
        "js": ["csdn.js"],
        "run_at": "document_end"
    }]
}
    manifest_version,name,version,这三个字段是一个插件中必须有的;
    description 是对于插件的描述
    其中matches意为“匹配”,就是说当浏览器打开特定的网页时,执行插件。
    csdn博客页面,有两种网页形式,比如小编的某一篇博客,可以为
    https://liuze.blog.csdn.net/article/details/124475761 和https://blog.csdn.net/qq_45404396/article/details/124475761,因此小编写了两个匹配机制,随便满足一种即可执行插件。
    js 注入的脚本文件列表
    run_at 注入js的时机
    另外一些字段信息读者可以看看这位大佬的这篇文章,文章为:https://blog.csdn.net/NoAttack/article/details/106922623

3. csdn.js
通过对csdn博客界面进行分析发现,只需更改博客界面某个link标签href属性即可更改博客皮肤样式。

image.png
另外,博客界面有一些样式是行内样式,因此,有一些地方需要额外进行样式处理。
参考代码如下:

var skins = [
        "https://csdnimg.cn/release/blogv2/dist/pc/themesSkin/skin-clickmove/skin-clickmove-517320b26c.min.css",
        "https://csdnimg.cn/release/blogv2/dist/pc/themesSkin/skin-blackaction/skin-blackaction-dda92bea31.min.css",
    ]
    //  css皮肤文件存储路径

var skin_select = document.createElement('select');
skins.forEach(function(ele, index) {
    let option_skin = document.createElement('option');
    option_skin.value = index;
    option_skin.innerText = 'skin' + (index + 1);
    skin_select.appendChild(option_skin);
});
// 创建一个下拉框

document.querySelector('body').appendChild(skin_select);
// 将下拉框添加到body内
skin_select.style.position = 'fixed';
skin_select.style.top = '50px';
skin_select.style.left = '8px';
skin_select.style.background = 'white';

skin_select.addEventListener('change', function() {
    let skin_index = this.value;
    links[4].href = skins[parseInt(skin_index)];
});
// 给下拉框添加一个监听事件

var csdn_bar = 'https://g.csdnimg.cn/common/csdn-toolbar/csdn-toolbar-dark.css';
// csdn 导航栏的样式文件存储路径
var csdn_img = 'https://img-home.csdnimg.cn/images/20211028053651.png';
// csdn 图标文件存储路径

var links = document.querySelectorAll('link');
links[4].href = skins[0];
links[6].href = csdn_bar;

var toolbar_logo = document.querySelector('.toolbar-logo a img');
toolbar_logo.src = csdn_img;
// 重新设置csdn图标文件路径

var toolbar_inside = document.querySelector('.toolbar-inside');
toolbar_inside.style.background = '#242429';
// 设置导航栏的背景颜色

var copyright_box = document.querySelector("#copyright-box");
copyright_box.className = 'dark';
var csdn_copyright_footer = document.querySelector("#csdn-copyright-footer");
csdn_copyright_footer.className = 'column small dark';

未用插件时的效果:

image.png
用插件的效果:
image.png
4. 实现在未登录状态下能copy代码
csdn现在搞了一个原力分数,用户copy别的用户代码的同时,别的用户的原力分数可以得到增加,但是这样的需要用户登录,但是如果某个用户不想登录,怎样才能copy代码呢?其实,挺简单的,就是更改界面样式中两个属性值即可。

image.png
image.png
user-select 属性规定是否能选取元素的文本。
image.png
把这两个属性值改成text即可。
4. 运行结果

image.png

免责声明:
1,海欣资源网所发布的资源由网友上传和分享,不保证信息的正确性和完整性,且不对因信息的不正确或遗漏导致的任何损失或损害承担责任。
2,海欣资源网的资源来源于网友分享,仅限用于学习交流和测试研究目的,不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。
3,海欣资源网所发布的资源由网友上传和分享,版权争议与本站无关,您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。
4,如果您喜欢,请支持正版,购买正版,得到更好的正版服务,如有侵权,请联系我们删除并予以真诚的道歉,联系方式邮箱 haixinst@qq.com
海欣资源-企业信息化分享平台。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

0

关注

0

粉丝

28

主题
热度排行
回复排行
最新贴子

Archiver|手机版|海欣资源 ( 湘ICP备2021008090号-1 )|网站地图

GMT+8, 2024-11-11 16:51 , Gzip On, MemCached On.

免责声明:本站所发布的资源和文章均来自网络,仅限用于学习交流和测试研究目的,不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。 本站信息来自网络,版权争议与本站无关,您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。 如果您喜欢,请支持正版,购买正版,得到更好的正版服务,如有侵权,请联系我们删除并予以真诚的道歉。