/*
* @title bookmarklet-launcher
* @description ブックマークレットで動作するアプリランチャーです
* @include https://*
* @license MIT License
* @require
*/
(function() {
if (document.getElementById('bookmarklet-launcher-modal')) {
document.getElementById('bookmarklet-launcher-modal').remove();
} else {
/*アプリ設定*/
var data = [{
link: "https://youtube.com",
title: "youtube"
}, {
link: "https://www.amazon.co.jp",
title: "amazon"
}, {
link: "https://www.nicovideo.jp",
title: "ニコニコ"
}];
let modal = document.createElement('div');
modal.id = "bookmarklet-launcher-modal";
modal.style =
"position: fixed;top: 8px;right: 8px;padding:8px;background-color:#fff;border-radius: 8px;box-shadow: 0 3px 6px rgba(0,0,0,0.2);z-index:12345;color:black;font-size:medium;font-family:sans-serif;line-height: 1.5;";
let close = document.createElement('img');
close.src = "https://icooon-mono.com/i/icon_11916/icon_119160_256.jpg";
close.style =
"position:fixed;top:20px;right:20px;width:16px;height:16px;z-index:123456;";
close.onclick = function() {
document.getElementById('bookmarklet-launcher-modal').remove();
};
let links = document.createElement('ul');
links.id = "links";
links.style =
"margin:0px;padding:0px;font-size: smaller;text-align: center;";
let title = document.createTextNode('Bookmarklet-Launcher ');
modal.appendChild(title);
modal.appendChild(close);
modal.appendChild(links);
document.body.appendChild(modal);
for (var i = 0; i < data.length; i++) {
var text = data[i].title;
var slicetext = text.length > 20 ? (text).slice(0, 16) + "…" : text;
slicetext = document.createTextNode(slicetext);
let elem = document.createElement('li');
elem.style =
"display: inline-block;width:64px;margin:0px 4px;word-break: break-all;vertical-align: top;position:relative;";
let ancher = document.createElement('a');
ancher.href = data[i].link;
let icon = document.createElement('img');
icon.src = "https://www.google.com/s2/favicons?sz=256&domain_url=" + data[i]
.link;
icon.style =
"vertical-align: middle;width:64px;height:64px;box-shadow: 0 3px 6px rgba(0,0,0,0.2);border-radius: 8px; -webkit-transition: all 0.2s ease;transition:all 0.2s ease;";
let = mask = document.createElement('div');
mask.style =
"width:100%;height:100%;position:absolute;top:0;left:0;opacity:0;background-color:rgba(0,0,0,0.8);-webkit-transition:all 0.2s ease;transition:all 0.2s ease;border-radius: 8px; display: grid;place-items: center; text-overflow: ellipsis;";
mask.onmouseover = function() {
this.style.opacity = '0.8';
};
mask.onmouseout = function() {
this.style.opacity = '0';
};
let name = document.createElement('p');
name.style = "margin:0;padding:0;color:#fff;font-size:small;";
elem.appendChild(ancher);
ancher.appendChild(icon);
ancher.appendChild(mask);
mask.appendChild(name);
name.appendChild(slicetext);
document.getElementById('links').appendChild(elem);
};
}
})();
