bookmarklet-launcher

by arajun0904 2022-02-06 [2022/02/06 10:48:47]

ブックマークレットで動作するアプリランチャーです

• /*
   * @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 LOADER Metadata ?

  Permalink

  このページへの個別リンクです。

  RAW

  書かれたコードへの直接のリンクです。

  Packed

  文字列が圧縮された書かれたコードへのリンクです。

  Userscript

  Greasemonkey 等で利用する場合の .user.js へのリンクです。

  Loader

  @require やソースコードが長い場合に多段ロードする Loader コミのコードへのリンクです。

  Metadata

  コード中にコメントで @xxx と書かれたメタデータの JSON です。