GoogleChrome拡張機能を初めて作成開発する為のサンプルコードです。

8557 ワード
Chrome JavaScript google JavaScript テキストリンク

GoogleChrome拡張機能を初めて作成：開発する為のサンプルコードです。
特に説明は致しません。
拡張機能の情報に関してはネットにいろいろなコードがある為、割愛します。
この拡張機能の使うとサイトが黄色に変わり・・・
どうなるか・・はい...ご想像どおりです。

主要なソースコードを貼っときます。

manifest.js
{
    "manifest_version": 2,
    "name": "Yahoooooooo!",
    "version": "0.1",
    "description": "拡張機能の説明😅",
    "permissions": [
        "activeTab"
    ],
    "icons": {
        "16": "src/icon16.png",
        "32": "src/icon32.png",
        "128": "src/icon128.png"
    },  
    "browser_action": {
        "default_popup": "src/index.html",
        "default_title":"黄色一色",
        "default_icon": {
            "16": "src/icon16.png",
            "32": "src/icon32.png",
            "128": "src/icon128.png"
        },
        "matches": ["https://*"]
    },
    "background":  {
      "scripts": ["src/background.js"],
      "persistant": false
    }
  }
src/y-main.js
document.getElementById("btn").onclick = function(){
    var data = {
        YAHOOO:"#FFFF00",
        url:"https://yahoo.co.jp/",
        txt:"エンジニアの皆さんYahoo!もたまには使いましょうClick!!"
    };
    chrome.runtime.sendMessage(data, function (response){
        alert(response.msg);
    });         
};
src/background.js
chrome.runtime.onMessage.addListener(function (message, sender, sendResponse) {
    //ここで(code)下、ページ内の操作をプログラムを記述する。y-mainから送られてきたデータはメッセージに入ってくる。
    //codeに受け渡したデータを他のバックグラウンドに受け渡す方法はこちら https://qiita.com/techneconn/items/6fa685ef3a1f62e6c383

    chrome.tabs.executeScript({
        code: `
        var data = ` + JSON.stringify(message) + `;
        document.body.style.backgroundColor = data.YAHOOO;
        //UTF8じゃないサイトだと文字化け😅
        document.body.innerHTML = "<a href='" + data.url + "'><h1 style='font-size:150px;color:#000;'>" + data.txt + "</h1></a>";
        `
    });

    //バックグラウンドから送信するのは下の関数を使用
    sendResponse({msg:"Yahoooooo!"});

    return true
});