三个不同对象，显示的不同的图标，划词不同内容分别弹出图标，如何合并到一个容器里面呢
原脚本地址
浏览器搜索扩展工具
var iconArraya = [
{
name: '百度',
image: 'https://i.ibb.co/R9HMTyR/1-5.png',
popup: function (text) {
open('https://search.bilibili.com/live?keyword=' + encodeURIComponent(text));
}
},
],
iconArrayb = [
{
name: '打开',
image: 'https://i.ibb.co/fxpm6Wc/image.png',host: [''],
popup: function (text) {
if(text.indexOf("http://")==0||text.indexOf("https://")==0)
window.open(text, "_blank");
else window.open("http://"+text, "_blank");
}
},
],
iconArrayc = [
{
name: '复制',
image: 'https://i.ibb.co/R0bq3jm/icons8-delete-512-1.png',
host: [''],
popup: function (text) {
text = document.defaultView.getSelection().toString();
document.execCommand('copy', false, null)
}
},
],
hostCustomMap = {};
iconArraya.forEach(function (obj) {
obj.host.forEach(function (host) {
hostCustomMap[host] = obj.custom;
});
});
iconArrayb.forEach(function (obj) {
obj.host.forEach(function (host) {
hostCustomMap[host] = obj.custom;
});
});
iconArrayc.forEach(function (obj) {
obj.host.forEach(function (host) {
hostCustomMap[host] = obj.custom;
});
});
var text = GM_getValue('search');
if (text && window.location.host in hostCustomMap) {
keyword.beforeCustom(hostCustomMap[window.location.host]);
}
var icona = document.createElement('div');
var iconb = document.createElement('div');
var iconc = document.createElement('div');
iconArraya.forEach(function (obj) {
var img = document.createElement('img');
img.setAttribute('src', obj.image);
img.setAttribute('alt', obj.name);
img.setAttribute('title', obj.name);
img.addEventListener('mouseup', function () {
keyword.beforePopup(obj.popup);
});
img.setAttribute('style', '' +
'cursor:pointer!important;' +
'display:inline-block!important;' +
'width:22px!important;' +
'height:22px!important;' +
'border:0!important;' +
'background-color:rgba(255,255,255,1)!important;' +
'padding:0!important;' +
'margin:0!important;' +
'margin-right:5px!important;' +
'');
icona.appendChild(img);
});
iconArrayb.forEach(function (obj) {
var img = document.createElement('img');
img.setAttribute('src', obj.image);
img.setAttribute('alt', obj.name);
img.setAttribute('title', obj.name);
img.addEventListener('mouseup', function () {
keyword.beforePopup(obj.popup);
});
img.setAttribute('style', '' +
'cursor:pointer!important;' +
'display:inline-block!important;' +
'width:22px!important;' +
'height:22px!important;' +
'border:0!important;' +
'background-color:rgba(255,255,255,1)!important;' +
'padding:0!important;' +
'margin:0!important;' +
'margin-right:5px!important;' +
'');
iconb.appendChild(img);
});
iconArrayc.forEach(function (obj) {
var img = document.createElement('img');
img.setAttribute('src', obj.image);
img.setAttribute('alt', obj.name);
img.setAttribute('title', obj.name);
img.addEventListener('mouseup', function () {
keyword.beforePopup(obj.popup);
});
img.setAttribute('style', '' +
'cursor:pointer!important;' +
'display:inline-block!important;' +
'width:22px!important;' +
'height:22px!important;' +
'border:0!important;' +
'background-color:rgba(255,255,255,1)!important;' +
'padding:0!important;' +
'margin:0!important;' +
'margin-right:5px!important;' +
'');
iconc.appendChild(img);
});
icona.setAttribute('style', '' +
'display:none!important;' +
'position:absolute!important;' +
'padding:0!important;' +
'margin:0!important;' +
'font-size:13px!important;' +
'text-align:left!important;' +
'border:0!important;' +
'background:transparent!important;' +
'z-index:2147483647!important;' +
'');
iconb.setAttribute('style', '' +
'display:none!important;' +
'position:absolute!important;' +
'padding:0!important;' +
'margin:0!important;' +
'font-size:13px!important;' +
'text-align:left!important;' +
'border:0!important;' +
'background:transparent!important;' +
'z-index:2147483647!important;' +
'');
iconc.setAttribute('style', '' +
'display:none!important;' +
'position:absolute!important;' +
'padding:0!important;' +
'margin:0!important;' +
'font-size:13px!important;' +
'text-align:left!important;' +
'border:0!important;' +
'background:transparent!important;' +
'z-index:2147483647!important;' +
'');
// 添加到 DOM
document.documentElement.appendChild(icona);
document.documentElement.appendChild(iconb);
document.documentElement.appendChild(iconc);
// 鼠标事件
document.addEventListener('mousedown', function (e) {
if (e.target == icona || (e.target.parentNode && e.target.parentNode == icona)||
e.target == iconb || (e.target.parentNode && e.target.parentNode == iconb)||
e.target == iconc || (e.target.parentNode && e.target.parentNode == iconc)) {
e.preventDefault();
}
});
// 选中变化事件：
document.addEventListener("selectionchange", function () {
if (!window.getSelection().toString().trim()) {
icona.style.display = 'none';
iconb.style.display = 'none';
iconc.style.display = 'none';
}
});
// 鼠标事件
document.addEventListener('mouseup', function (e) {
if (e.target == icona || (e.target.parentNode && e.target.parentNode == icona)||
e.target == iconb || (e.target.parentNode && e.target.parentNode == iconb)||
e.target == iconc || (e.target.parentNode && e.target.parentNode == iconc)
) {
e.preventDefault();
return;
}
var text = window.getSelection().toString().trim();
var url = text.match(/(https?:\/\/(\w[\w-]*\.)+[A-Za-z]{2,4}(?!\w)(:\d+)?(\/([\x21-\x7e]*[\w\/=])?)?|(\w[\w-]*\.)+(com|cn|org|net|info|tv|cc|gov|edu)(?!\w)(:\d+)?(\/([\x21-\x7e]*[\w\/=])?)?)/i);
if (url && iconb.style.display == 'none') {
iconb.style.top = e.pageY +40 + 'px';
if(e.pageX -70<10)
iconb.style.left='10px';
else
iconb.style.left = e.pageX -70 + 'px';
iconb.style.display = 'block';
} else if (text.length >= 30) {
iconc.style.top = e.pageY +40 + 'px';
if(e.pageX -70<10)
iconc.style.left='10px';
else
iconc.style.left = e.pageX -70 + 'px';
iconc.style.display = 'block';
} else if (!text) {
icona.style.display = 'none';
iconb.style.display = 'none';
} else if(text && icona.style.display == 'none'){
icona.style.top = e.pageY +40 + 'px';
if(e.pageX -70<10)
icona.style.left='10px';
else
icona.style.left = e.pageX -70 + 'px';
icona.style.display = 'block';
}
});定义一个数组，循环进行赋值
相关文章
精彩导读
热门资讯