前言：
如今小伙伴们对“页面禁止复制代码”可能比较着重，各位老铁们都需要了解一些“页面禁止复制代码”的相关资讯。那么小编同时在网摘上收集了一些对于“页面禁止复制代码””的相关文章，希望兄弟们能喜欢，朋友们一起来了解一下吧！作为一个开发人员我经常遇到以下两个问题
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": [ "*" ], "js": [ "content.js" ] } ]}一、实现csdn免登复制csdn问题是：
1、文章不能选中
2、点击复制按钮会弹出登陆按钮
实现详见代码写在content.js中
var textareafunction 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、将浏览器链接生成二维码
需要可自取
版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
标签： #页面禁止复制代码
