GoogleChrome 확장 기능을 처음으로 작성 개발하기 위한 샘플 코드입니다.
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
});
Reference
이 문제에 관하여(GoogleChrome 확장 기능을 처음으로 작성 개발하기 위한 샘플 코드입니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/question909/items/0aa76eac5f53ef974c8f텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)