githubとtwitterをけものフレンズ風にするChrome拡張機能
流行っているので速攻開発
ネタで作ってみた。
拡張機能を作る基本的なとこは割愛
Chromeメニューのボタンを押したら、githubとtwitterの一部の文字がいい感じになるやつ。
片道切符なので、戻したい場合は更新ww
個人的には戻す機能もつけたかったが、そこまでいるかと疑問に思いやめる。
manifest.json
{ "name": "Friends Mode", "version": "1.0", "icons": { "16": "images/icon/icon_16.png", "48": "images/icon/icon_48.png", "128": "images/icon/icon_128.png" }, "manifest_version": 2, "description": "githubとtwitterがけものフレンズ風の色合いになる。", "background": { "scripts": ["js/background.js"], "persistent": false }, "browser_action": { "default_title": "Friends Mode" }, "content_scripts": [ { "matches": ["https://github.com/*", "https://twitter.com/*"], "js": ["js/jquery-2.1.4.min.js", "js/main.js"], "run_at": "document_idle" } ] }
background.js
chrome.browserAction.onClicked.addListener(function(tab) { chrome.tabs.sendMessage(tab.id, { command: "friends mode" }, function(msg) { console.log("result message:", msg); }); });
main.js
$(function(){ function chenge_text(className){ var i = 0; var ii = 0; var code = document.getElementsByClassName(className); var color = ["23AC69","91C132","F19726","E8552D","1AAB8E","E1147F","2980C1","1BA1E6","9FA0A0","A3338B"]; for (i = 0; i < code.length; i++){ code[i].innerHTML = code[i].innerText.replace(/./g, function(s){ return '<span style="color:#'+color[ii++ % color.length]+'">' + s + '</span>' }); } } chrome.runtime.onMessage.addListener(function(msg, sender, sendResponse) { if (location.host.match(/github/)) { var className = "blob-code"; } else if (location.host.match(/twitter/)) { var className = "tweet-text"; } chenge_text(className); }); $('.new-tweets-bar-visible').on('click', function(){ var className = "tweet-text"; chenge_text(className); }); });