网站首页 > 技术文章正文

csdn免录可复制实现当前页面生成二维码链接

nanyue 2025-08-03 06:54:33 技术文章 3 ℃

作为一个开发人员我经常遇到以下两个问题

1、经常会搜索一些来源于csdn的资料，但csdn不能免登复制，非常不方便

2、有些链接需要在移动端访问，由于公司网络管控的原因，但链接不好同步，所以采用将链接生成二维码，然后通过手机扫码访问。

如何解决以上问题，我采用的时开发一个谷歌插件来实现，编写插件插件的方式我阐述如下：

谷歌插件配置文件介绍：

manifest.json

用来配置Chrome插件相关的配置，必须放在根目录。action.default_popup是插件的页面配置

content_scripts是用于加载到浏览器tab中的文件配置，这里配置了至由csdn的网站才加载content.js

{
    "manifest_version": 3,
    "name": "riona",
    "version": "1.0",
    "description": "A simple Chrome extension for url qrcode",
    "permissions": [
        "tabs",
        "activeTab",
        "scripting"
    ],
    "action": {
        "default_popup": "popup.html",
        "default_title": "url to qrcode",
        "default_icon": {
            "16": "images/icon.jpg",
            "48": "images/icon.jpg",
            "128": "images/icon.jpg"
        }
    },
    "background": {
        "service_worker": "background.js"
    },
    "content_scripts": [
        {
            "matches": [
                "https://blog.csdn.net/*"
            ],
            "js": [
                "content.js"
            ]
        }
    ]
}

一、实现csdn免登复制

csdn问题是：

1、文章不能选中

2、点击复制按钮会弹出登陆按钮

实现详见代码写在content.js中

var textarea
function copyText(text) { //复制功能函数
    if (!textarea) {
        textarea = document.createElement('textarea')
    }
    textarea.style.position = 'fixed'
    textarea.style.left = '-500px'
    textarea.style.top = '500px'
    textarea.textContent = text.replace(/[\u00A0]/gi, " "),
        // input.setAttribute('value', text)
        document.body.appendChild(textarea)
    textarea.select()
    document.execCommand('Copy')
    document.body.removeChild(textarea)
}


setTimeout(function () {
    var style = document.createElement('style');
    // 使点击按钮后不会出现登陆框，以及代码可以选中
    style.innerHTML = `.passport-login-container { 
                        display: none!important 
                    } 
            #content_views pre, #content_views pre code {
                -webkit-touch-callout: unset!important;;
                -webkit-user-select: unset!important;;
                -khtml-user-select: unset!important;;
                -moz-user-select: unset!important;;
                -ms-user-select: unset!important;;
                user-select: unset!important;;
            }`;
    document.head.appendChild(style);
}, 10);


 setTimeout(() => { 
    var lists = document.getElementsByClassName('hljs-button'); 
    for (var i = 0, len = lists.length; i < len; i++) {
        var element = lists[i]
        element.setAttribute('data-title', '复制'); // 将登陆复制按钮修改成复制按钮
        element.onclick = (e) => { // 点击复制按钮实现代码复制
            var i = e.target || e.srcElement; 
            var text = i.parentNode.innerText.replace(/[\u00A0]/gi, " ");
            copyText(text)
        }
    }
    document.getElementById('content_views').oncopy = function (event) { // 实现选中文字可复制
        var selection = document.getSelection();
        var selectContent = selection.toString();
        copyText(selectContent)
    }
}, 100)

效果如下：

二、生产页面链接的二维码

思路为获取当前浏览器的tab然后生成对应的二维码链接，采用插件展示二维码.

插件页面代码如下popup.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>riona</title>
</head>
<body>

  <div id="qrcode" >
  </div>

  <script src="qrcode.min.js"></script>
  <script src="popup.js"></script>
</body>
</html>

popup.js代码实现二维码生成逻辑

var qrcode = document.getElementById('qrcode')
chrome.tabs.query({ active: true, currentWindow: true },
    function (tabs) {
        var url = tabs.length ? tabs[0].url : ''  // 获取当前 tab url 
        new QRCode(document.getElementById('qrcode'), {
            text: url,
            width: 128,
            height: 128,
            colorDark: "#000000",
            colorLight: "#ffffff", 
        });
    });

效果如下

点击下载插件源码：（自己的仓库，头条大大）

urltoqrcode: 1、实现csdn免登复制2、将浏览器链接生成二维码

需要可自取

上一篇：前端分享-少年了解过iframe么
下一篇：一起学 pixijs(4):如何绘制文字

网站首页 > 技术文章 正文

csdn免录可复制实现当前页面生成二维码链接

manifest.json

一、实现csdn免登复制

二、生产页面链接的二维码

猜你喜欢

网站首页 > 技术文章正文