作为一个开发人员我经常遇到以下两个问题
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、将浏览器链接生成二维码
需要可自取