Help us understand the problem. What is going on with this article?

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

2020-06-11_1307.png

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
});

question909
アイディアや個人用として使用しています。
https://taoka-toshiaki.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away