bookmarklet-launcher

    
      
  • /*
     * @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);
    		};
    	}
    })();
    
    
    
    
  • Permalink
    このページへの個別リンクです。
    RAW
    書かれたコードへの直接のリンクです。
    Packed
    文字列が圧縮された書かれたコードへのリンクです。
    Userscript
    Greasemonkey 等で利用する場合の .user.js へのリンクです。
    Loader
    @require やソースコードが長い場合に多段ロードする Loader コミのコードへのリンクです。
    Metadata
    コード中にコメントで @xxx と書かれたメタデータの JSON です。

History

  1. 2022/02/06 10:48:47 - 2022-02-06