読者です 読者をやめる 読者になる 読者になる

githubとtwitterをけものフレンズ風にするChrome拡張機能

流行っているので速攻開発
ネタで作ってみた。

拡張機能を作る基本的なとこは割愛

Chromeメニューのボタンを押したら、githubtwitterの一部の文字がいい感じになるやつ。
片道切符なので、戻したい場合は更新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);

    });
    
});