Chromeã¢ããªã³éçºã®ãã¥ã¼ããªã¢ã«ï¼ããã¼ã¸ã®èæ¯è²ãå¤ããã¢ããªã³ï¼Getting Started Tutorialï¼
â»ãã®è¨äºã¯ï¼Googleã®Getting Started Tutorialãæ¥æ¬èªè¨³ãããã®ã§ãã
Chromeã¢ããªã³ã¯ï¼è¤æ°ã®ã³ã³ãã¼ãã³ãã«ãã£ã¦æãç«ã£ã¦ãã¾ãã
ã³ã³ãã¼ãã³ãå士ã¯ï¼äºãã«é¢é£æ§ãããã¾ãï¼cohesiveï¼ã
ã³ã³ãã¼ãã³ãã®ç¨®é¡ã¨ãã¦ã¯ï¼
- ãã®ä»ã®ãã¸ãã¯ãè¨è¿°ãããã¡ã¤ã«
ãªã©ãããã¾ãã
ã¢ããªã³ã®ã³ã³ãã¼ãã³ãã¯ï¼HTMLï¼CSSï¼JavaScriptã¨ãã£ãWebéçºã®æè¡ãç¨ãã¦ä½æããã¾ãã
ã¢ããªã³ãã¨ã«æ©è½ãç°ãªãã¾ãã®ã§ï¼å¿ è¦ã¨ãªã£ã¦ããã³ã³ãã¼ãã³ããå¤ãã£ã¦ãã¾ãã
ãã®ãã¥ã¼ããªã¢ã«ã§ã¯ï¼ä¸ã¤ã®ã¢ããªã³ãä½ãã¾ãã
developer.chrome.com ã®ãã¡ã¤ã³ä¸ã«ããä»»æã®ãã¼ã¸ä¸ã§ï¼ãã¼ã¸ã®èæ¯è²ãå¤æ´ãããã¨ãå¯è½ã«ãªããããªã¢ããªã³ã§ãã
ãããä½ããã¨ããã¨ï¼å¤ãã®ã³ã¢ã³ã³ãã¼ãã³ããæ±ããã¨ã«ãªãã®ã§ï¼ãããã®é¢ä¿ãç解ããããã®å ¥éç¨ãã¢ã¨ãã¦ãã£ã¦ã¤ãã§ãã
å§ããã«ããã£ã¦ï¼ã¾ããã®ã¢ããªã³ã®ãã¡ã¤ã«ãæ ¼ç´ããããã®ãã©ã«ããæ°è¦ä½æãã¦ãã ããã
ãªãå®æçã®ã¢ããªã³ã¯ãã¡ããããã¦ã³ãã¼ãã§ãã¾ãã
ãããã§ã¹ããä½æãã
ã¢ããªã³éçºã¯ï¼ã¾ãã¯ãããã§ã¹ãä½ãããå§ã¾ãã®ã§ãã
manifest.json ã¨ãããã¡ã¤ã«ãä½æãï¼ä¸è¨ã®ã³ã¼ããè¨è¿°ãã¦ãã ããã
ï¼ãããã¯ï¼ãã¡ããããã¦ã³ãã¼ããããã¨ãã§ãã¾ããï¼
{ "name": "Getting Started Example", "version": "1.0", "description": "Build an Extension!", "manifest_version": 2 }
ãã®æç¹ã§ãã§ã«ï¼ãããã§ã¹ãã®ãã¡ã¤ã«ãåå¨ãããã©ã«ããï¼ãããããã¼ã¢ã¼ãã§Chromeã«èªã¿è¾¼ã¾ãããã¨ãã§ãã¾ãã
- ã¯ãã¼ã 㧠chrome://extensions ãéãï¼ã¢ããªã³ã®ç®¡çãã¼ã¸ãéãã¦ãã ããã
- ãã©ã¦ã¶ã®ã¡ãã¥ã¼ããããã®ä»ã®ãã¼ã«âæ¡å¼µæ©è½ãã§éããã¨ãã§ãã¾ãã
- ããããããã¼ã¢ã¼ããã®é£ã«ããããããã¯ãªãã¯ãã¦ï¼ãããããã¼ã¢ã¼ããæå¹ã«ãã¾ãã
- ãããã±ã¼ã¸åããã¦ããªãæ¡å¼µæ©è½ãèªã¿è¾¼ãããã¿ã³ãã¯ãªãã¯ãï¼å ç¨ã®ã¢ããªã³éçºç¨ã«ä½ã£ããã©ã«ããé¸æãã¾ãã
èªã¿è¾¼ãã¾ãããï¼ãã®ã¢ããªã³ã®ã¤ã³ã¹ãã¼ã«ã«æåãã¾ããã
ãããã§ã¹ãã«ã¢ã¤ã³ã³ãå®ç¾©ããã¦ããªãã®ã§ï¼ãã®ã¢ããªã³ã表ãããã«ï¼ããã©ã«ãã®ãã¼ã«ãã¼ã¢ã¤ã³ã³ã表示ããã¾ãã
å¦çã追å ãã
ã¢ããªã³ã®ã¤ã³ã¹ãã¼ã«ã¯ã§ãã¾ãããï¼ããã§ã¯ã¾ã ï¼ä½ãå¦çãããã¾ããã
ããã§ï¼ã¢ããªã³ã®ãã©ã«ãã®ä¸ã«ï¼ããã¯ã°ã©ã¦ã³ãã»ã¹ã¯ãªããã追å ãã¾ãããã
background.js ã¨ããååã®ãã¡ã¤ã«ãä½æãããï¼ãããããã¦ã³ãã¼ããã¦ãã ããã
ããã¯ã°ã©ã¦ã³ãã¹ã¯ãªãããããã§ããï¼ã¢ããªã³ãæ§æããéè¦ãªã³ã³ãã¼ãã³ãã¯ã©ããçï¼ãããã§ã¹ãã®ä¸ã«ç»é²ãã宣è¨ããã¦ããªããã°ãªãã¾ããã
ãããã§ã¹ãã®ä¸ã«ï¼ããã¯ã°ã©ã¦ã³ãã»ã¹ã¯ãªããã宣è¨ãã¦ããã¨ï¼ã¢ããªã³ã¯ã©ã®ãã¡ã¤ã«ãã¹ã¯ãªããã¨ãã¦åç
§ããã°ããã®ãããããã¾ããï¼ãã®ãã¡ã¤ã«ãã©ããã風ã«æ¯ãèãã¹ããããããã¾ãã
{ "name": "Getting Started Example", "version": "1.0", "description": "Build an Extension!", "background": { // ãã®é¨åãè¿½è¨ "scripts": ["background.js"], "persistent": false }, "manifest_version": 2 }
ãããã¦ããã°ï¼ã¢ããªã³ã¯ããã¯ã°ã©ã¦ã³ãã»ã¹ã¯ãªããã®åå¨ãèå¥ã§ãã¾ãã
ï¼ãããã§ã¹ããè¦ã¦ãããããã«ï¼ãã®ã¹ã¯ãªããã¯épersistentã§ãããããªå±æ§ãæã£ã¦ãã¾ããï¼
ããã¦ã¢ããªã³ã¯ï¼ãã®ã¹ã¯ãªãããèªã¿è¾¼ã¿ï¼ãªãã¹ã³ãã¹ãã¤ãã³ããå¤å¥ãã¾ãã
ãã®ã¢ããªã³ã¯ï¼ã¤ã³ã¹ãã¼ã«ãããç´å¾ã«ï¼persistent ãªå¤æ°ããã®æ å ±èªã¿è¾¼ã¿ãå¿ è¦ã¨ãã¾ãã
ãã®ããã«ï¼ background.js ã®ä¸ã«ï¼runtime.onInstalled ã¨ããã¤ãã³ãããªãã¹ã³ããã³ã¼ããæ¸ãã¾ãããã
onInstalled ãªã¹ãã®ä¸ã§ï¼ã¢ããªã³ã¯storage API ãçµç±ãã¦ï¼å¤ãä¿åãã¾ãã
ãããããã¨ã§ï¼ã¢ãã³ãæ§æããä»ã®æ§ã ãªã³ã³ãã¼ãã³ãã®ä¸ããï¼ãã®ä¿åãããå¤ã«ã¢ã¯ã»ã¹ãï¼å¤ãæ´æ°ãããã¨ãã§ããããã«ãªãã¾ãã
// ã¢ããªã³ã®ã¤ã³ã¹ãã¼ã«æã®ã¤ãã³ãããªãã¹ã³ãã chrome.runtime.onInstalled.addListener(function() { // ã¹ãã¬ã¼ã¸APIãçµç±ãã¦å¤ãä¿åãã chrome.storage.sync.set({color: '#3aa757'}, function() { // ãã°è¡¨ç¤º console.log("The color is green."); }); });
ããã§ã¯ã¹ãã¬ã¼ã¸APIã使ã£ã¦ãã¾ããï¼ã»ã¼ã©ããªAPIã使ãå ´åã«ãå¿
è¦ã«ãªãã®ãï¼å©ç¨ããAPIã® "permissions" ããããã§ã¹ãã®ä¸ã§å®£è¨ãã¦ãããã¨ã§ãã
ãããã§ã¹ãã®ä¸ã§å®£è¨ãã¦ãããã¨ã§ï¼ã¢ããªã³ã¯ãã®APIãå©ç¨å¯è½ã«ãªãã¾ãã
{ "name": "Getting Started Example", "version": "1.0", "description": "Build an Extension!", "permissions": ["storage"], // ãããè¿½è¨ "background": { "scripts": ["background.js"], "persistent": false }, "manifest_version": 2 }
ã¢ããªã³ã®ç®¡çãã¼ã¸ãå度éãï¼ä»ä½ã£ã¦ããã¢ããªã³ã®ã¨ããã«ãããªãã¼ããã¿ã³ãæ¼ãã¦ãã ããã
ããã¥ã¼ãæ¤è¨¼ãã¨ããæè¨ã®é£ã«ï¼ãããã¯ã°ã©ã¦ã³ããã¼ã¸ãã¨ãããªã³ã¯ãã§ãã¦ããã¯ãã§ãã
ãããã¯ã°ã©ã¦ã³ããã¼ã¸ãã®ãªã³ã¯ãã¯ãªãã¯ããã¨ï¼ãã®é¨åãæå¹åããï¼Chromeã®éçºè ãã¼ã«ãéãã¾ãã
ããã§ããä¸åº¦ï¼Chromeãã©ã¦ã¶ä¸ã§ã¢ããªã³ç®¡çãã¼ã¸ãéãï¼ä»ä½ã£ã¦ããã¢ããªã³ã®ã¨ããã«ãããªãã¼ããã¿ã³ãæ¼ãã¦ã¿ã¦ãã ããã
Chromeéçºè
ãã¼ã«ä¸ã§ï¼"The color is green." ã¨ããã³ã³ã½ã¼ã«ãã°ãåºåããã¾ãã
ã¦ã¼ã¶ã»ã¤ã³ã¿ãã§ã¼ã¹ãå°å ¥ãã
æ¡å¼µæ©è½ã¯æ§ã ãªå½¢æ ã®UIï¼ã¦ã¼ã¶ã»ã¤ã³ã¿ãã§ã¼ã¹ï¼ãæã¤ãã¨ãã§ãã¾ãã
ä»åã®æ¡å¼µæ©è½ã®å ´åã¯ï¼ãããã¢ããã¨ããå½¢ã§ã®UIã«ãªãã¾ãã
ãã©ã«ãä¸ã« popup.html ã¨ããååã®ãã¡ã¤ã«ãä½æãããï¼ãã¡ããããã¦ã³ãã¼ããã¦ãã ããã
ãã®æ¡å¼µæ©è½ã§ã¯ï¼èæ¯è²ãå¤æ´ããããã®ãã¿ã³ãå¿ è¦ã§ãã
<!DOCTYPE html> <html> <head> <style> button { height: 30px; width: 30px; outline: none; } </style> </head> <body> <button id="changeColor"></button> </body> </html>
ããã¯ã°ã©ã¦ã³ãã»ã¹ã¯ãªããã¨åãããã«ï¼ãã®ãã¡ã¤ã«ããããã§ã¹ãã«ç»é²ããå¿ è¦ãããã¾ãã
page_action ã¨ããé ç®å ã«ï¼ãã®ãã¡ã¤ã«ããããã¢ããã¨ãã¦åä½ããããã«è¨è¼ãã¾ãããã
{ "name": "Getting Started Example", "version": "1.0", "description": "Build an Extension!", "permissions": ["storage"], "background": { "scripts": ["background.js"], "persistent": false }, "page_action": { // ãã®é¨å "default_popup": "popup.html", }, "manifest_version": 2 }
ããã« page_action ã® default_icon ã¨ããé
ç®å
ã«ï¼ãã¼ã«ãã¼ç¨ã®ã¢ã¤ã³ã³ãæå®ãããã¨ãã§ãã¾ãã
ç»åãã©ã«ãããã¡ããããã¦ã³ãã¼ããã¦ï¼è§£åãï¼æ¡å¼µæ©è½ã®ãã©ã«ãå ã«è¨ç½®ãã¦ãã ããã
ãããã§ã¹ããæ´æ°ãï¼æ¡å¼µæ©è½ããè¦ã¦ãããã®ç»åãã©ã使ãããããæå®ãã¾ãããã
{ "name": "Getting Started Example", "version": "1.0", "description": "Build an Extension!", "permissions": ["storage"], "background": { "scripts": ["background.js"], "persistent": false }, "page_action": { "default_popup": "popup.html", "default_icon": { // ãã®é¨å "16": "images/get_started16.png", "32": "images/get_started32.png", "48": "images/get_started48.png", "128": "images/get_started128.png" } }, "manifest_version": 2 }
æ¡å¼µæ©è½ã¯ããã«ï¼ã¢ããªã³ã®ç®¡çãã¼ã¸ä¸ãªã©ã§ç»åã表示ãã¾ãã
ãã¼ããã·ã§ã³ã®è¦åæã®è¡¨ç¤ºãï¼favicon ã¨ãã¦ã®è¡¨ç¤ºãããã¾ãã
ãããã®ç¨éã§ã®ç»å表示ã¯ï¼ãããã§ã¹ãå ã® icons ã¨ããé ç®å ã«è¨è¼ã»æå®ããã¾ãã
{ "name": "Getting Started Example", "version": "1.0", "description": "Build an Extension!", "permissions": ["storage"], "background": { "scripts": ["background.js"], "persistent": false }, "page_action": { "default_popup": "popup.html", "default_icon": { "16": "images/get_started16.png", "32": "images/get_started32.png", "48": "images/get_started48.png", "128": "images/get_started128.png" } }, "icons": { // ãã®é¨å "16": "images/get_started16.png", "32": "images/get_started32.png", "48": "images/get_started48.png", "128": "images/get_started128.png" }, "manifest_version": 2 }
ãã®æ®µéã§ï¼ãã¾ä½ã£ã¦ããæ¡å¼µæ©è½ããªãã¼ãããã¨ï¼ã°ã¬ã¤ã¹ã±ã¼ã«ã®ã¢ã¤ã³ã³ä»ãã§æ¡å¼µæ©è½ã表示ããã¾ãã
ãããï¼æ©è½çã«ã¯ã¾ã ä½ãæ°ãããã®ã追å ããããã¨ã«ãªã£ã¦ãã¾ããã
ãããã§ã¹ãå
㧠page_action ã宣è¨ããã¦ãã¾ããï¼
ãã¤ã©ããªã¿ã¤ãã³ã°ã§ã¦ã¼ã¶ã popup.html ã使ç¨ã§ããã®ããã¾ã æå®ããã¦ããªãã®ã§ï¼
æ¡å¼µæ©è½ããã©ã¦ã¶ä¸ã«ãããã¢ããã表示ã§ããªãã®ã§ãã
ããã§ï¼ããã¯ã°ã©ã¦ã³ãã»ã¹ã¯ãªããã® runtime.onInstalled ã®ã¤ãã³ããªã¹ãã®ä¸ã«ï¼
declarativeContent API ã使ã£ã¦
ãã¤ãããã¢ãããã¡ã¤ã«ã使ç¨ã§ããã®ãæ示çã«å®£è¨ãã¾ãããã
chrome.runtime.onInstalled.addListener(function() { chrome.storage.sync.set({color: '#3aa757'}, function() { console.log('The color is green.'); }); // ãã®é¨å chrome.declarativeContent.onPageChanged.removeRules(undefined, function() { chrome.declarativeContent.onPageChanged.addRules( [{ conditions: [ new chrome.declarativeContent.PageStateMatcher({ pageUrl: { hostEquals: 'developer.chrome.com' }, }) ], actions: [ new chrome.declarativeContent.ShowPageAction() ] }] ); }); });
æ¡å¼µæ©è½ã¯ï¼ declarativeContent API ã使ç¨ããããã«ï¼ãããã§ã¹ãä¸ã§ãã¼ããã·ã§ã³è¨å®ãå¿
è¦ã§ãã
{ "name": "Getting Started Example", ... "permissions": ["declarativeContent", "storage"], // ãã®é¨å ... }
ãããããã¨ã§ï¼ããã¾ã§ãã©ã¦ã¶ã®ãã¼ã«ãã¼ä¸ã§ã°ã¬ã¼ã¹ã±ã¼ã«ã ã£ãã¢ã¤ã³ã³ãï¼ãã«ã«ã©ã¼ã§è¡¨ç¤ºãããããã«ãªãã¾ãã
URLã« "developer.chrome.com" ãå«ã¾ãããããªãã¼ã¸ã«ã¦ã¼ã¶ãé·ç§»ããæã«ï¼
ãã®ã¢ã¤ã³ã³ã¯ãã«ã«ã©ã¼ã«ãªãï¼
ã¦ã¼ã¶ã¯ãããã¯ãªãã¯ãã¦popup.htmlãå¼ã³åºããã¨ãã§ãã¾ãã
ãããã¢ããUIå°å ¥ã®æå¾ã®ã¹ãããã¯ï¼UIå ã®ãã¿ã³ã«è²è¨å®ã®æ©è½ããããããã¨ã§ãã
æ¡å¼µæ©è½ã®ãã©ã«ãã« popup.js ã¨ãããã¡ã¤ã«ãä½æãããï¼ãã¡ããããã¦ã³ãã¼ããã¦ãã ããã
ãã®ä¸ã«ã¯ï¼ä¸è¨ã®ãããªã³ã¼ããè¨è¿°ãã¾ãã
let changeColor = document.getElementById('changeColor'); chrome.storage.sync.get('color', function(data) { changeColor.style.backgroundColor = data.color; changeColor.setAttribute('value', data.color); });
ãã®ã³ã¼ãã¯ï¼popup.htmlã®ä¸ãããã¿ã³è¦ç´ ãæ½åºãï¼
ã¹ãã¬ã¼ã¸ã®ä¸ããè²ã®è¨å®å¤ãåãåºãã¦ãã¾ãã
ããã¦è²ã®è¨å®å¤ããã¿ã³ã®èæ¯è²ã«é©ç¨ãã¦ãã¾ãã
ãã®ãã¸ã㯠popup.js ãï¼popup.htmlã®ä¸ã«scriptã¿ã°ã¨ãã¦å«ãã¾ãããã
<!DOCTYPE html> <html> ... <body> <button id="changeColor"></button> <script src="popup.js"></script> </body> </html>
æ¡å¼µæ©è½ããªãã¼ãããã¨ï¼ç·è²ã®ãã¿ã³ãè¦ããã¯ãã§ãã
ããã¯ï¼ãã¿ã³ã«èæ¯è²ãé©ç¨ããã¦ããã¨ãããã¨ã§ãã
ã¿ãå ã®èæ¯è²ãæä½ãããã¸ãã¯
ããã¾ã§ã§ï¼æ¡å¼µæ©è½ããè¦ã¦ãããã¢ãããå©ç¨å¯è½ã«ãªãã¾ããã
developer.chrome.comä¸ã§ãããã¢ããã表示ãï¼è²ã®ã¤ãããã¿ã³ã表示ããï¼ã¨ããæã¾ã§ã§ãã¾ããã
ããããå ï¼ã¦ã¼ã¶ã¨ã®ã¤ã³ã¿ã©ã¯ã·ã§ã³ã«å¿ãã¦ï¼ãã¨å°ããã¸ãã¯ã®è¿½å ãå¿ è¦ã§ãã
popup.jsã«ä¸è¨ã®ãããªã³ã¼ãã追è¨ãã¾ãããã
let changeColor = document.getElementById('changeColor'); ... // ããããè¿½è¨ changeColor.onclick = function(element) { let color = element.target.value; chrome.tabs.query( { active: true, currentWindow: true }, function(tabs) { chrome.tabs.executeScript( tabs[0].id, { code : 'document.body.style.backgroundColor = "' + color + '";' } ); } ); };
ä¸è¨ã®ã³ã¼ãã¯ï¼ãã¿ã³ã®onclickã¤ãã³ãã追å ãã¦ãã¾ãã
ããã§ã¯ï¼åçã«çµã¿ä¸ããJSã³ã¼ããã¿ãå ã«æ³¨å ¥ãã¦ãã¾ããããã«ããï¼ãã¼ã¸ã®èæ¯è²ããã¿ã³ã®èæ¯è²ã¨åãè²ã«ãªãã¾ãã
ãã®ããã«åçã«JSã³ã¼ããæ³¨å ¥ããã°ï¼Webãã¼ã¸ä¸ã«ä¸å¿ è¦ãªã³ã¼ãã追è¨ããå¿ è¦ããªãï¼ã¦ã¼ã¶ã®éãããã¼ã¸ä¸ã§ä»»æã®JSã³ã¼ããå®è¡ãããã¨ãã§ãã¾ãã
ä¸è¨ã®ã³ã¼ããå®è¡ããããã«ã¯ï¼ãããã§ã¹ãã« activeTab ã®ãã¼ããã·ã§ã³ã追è¨ãã¾ãã
ããã«ããï¼æ¡å¼µæ©è½ã¯ tabs API ã«ã¢ã¯ã»ã¹ãããã¨ãå¯è½ã«ãªãï¼tabs.executeScript ãå®è¡ã§ããããã«ãªãã¾ãã
{ "name": "Getting Started Example", ... "permissions": ["activeTab", "declarativeContent", "storage"], ... }
ããã§ï¼ä»åä½ããã¨ãã¦ããæ¡å¼µæ©è½ã®åä½ãå®è£ ã§ãã¾ããã
æ¡å¼µæ©è½ããªãã¼ããï¼Webãã¼ã¸ããªãã¼ããã¦ããï¼ãããã¢ãããéãï¼ãã¿ã³ãæ¼ãã¦ç·è²ã«ãã¦ã¿ã¾ãããã
ããå°ãå¤åãå ãã¦ã¿ã¾ããã¦ã¼ã¶ã¯ãã£ã¨ï¼èæ¯è²ãç·è²ã ãã§ãªãï¼ä»ã®è²ã«ãå¤åããã¦ã¿ããã¯ãã§ãã
ã¦ã¼ã¶ãé¸æå¯è½ãªãªãã·ã§ã³ãå¢ããã¦ã¿ã
ä»ã®ã¨ããï¼ãã®æ¡å¼µæ©è½ã¯ï¼èæ¯è²ãç·è²ã«å¤ãããã¨ããã§ãã¾ããã
ãªãã·ã§ã³ãã¼ã¸ã追å ãããã¨ã«ãã£ã¦ï¼ã¦ã¼ã¶ãæ¡å¼µæ©è½ã®åä½ããã£ã¨å¤ããããããã«ãï¼ãã©ã¦ã¶ã¼ã®åä½ãããä¸å±¤ã«ã¹ã¿ãã¤ãºã§ããããã«ãã¦ã¿ã¾ãããã
ãã©ã«ãä¸ã« options.html ã¨ãããã¡ã¤ã«ãä½ãï¼ä¸è¨ã®ã³ã¼ããè¨è¿°ãã¦ãã ããããã¡ããããã¦ã³ãã¼ããã§ãã¾ãã
<!DOCTYPE html> <html> <head> <style> button { height: 30px; width: 30px; outline: none; margin: 10px; } </style> </head> <body> <div id="buttonDiv"> </div> <div> <p>èæ¯è²ãé¸ãã§ãã ããã</p> </div> </body> <script src="options.js"></script> </html>
ãã®ãªãã·ã§ã³ãã¼ã¸ããããã§ã¹ãã«ç»é²ãã¾ãã
{ "name": "Getting Started Example", ... // ãã "options_page": "options.html", ... "manifest_version": 2 }
æ¡å¼µæ©è½ããªãã¼ããï¼è©³ç´°ãã¯ãªãã¯ãã¾ãã
詳細ãã¼ã¸ãä¸ã«ã¹ã¯ãã¼ã«ãï¼æ¡å¼µæ©è½ã®ãªãã·ã§ã³ï¼Extension optionsï¼ãé¸ãã§ãªãã·ã§ã³ãã¼ã¸ã表示ãã¾ããä»ã¯ç©ºç½ã®ãã¼ã¸ã¨ãã¦è¡¨ç¤ºãããã¯ãã§ãã
æå¾ã®ã¹ãããã¯ï¼ãªãã·ã§ã³ãã¼ã¸ã«ãã¸ãã¯ã追å ãããã¨ã§ãã
options.jsã¨ãããã¡ã¤ã«ãä½ãï¼ä¸è¨ã®ã³ã¼ããè¨è¿°ãã¦ãã ããããã¡ããããã¦ã³ãã¼ããã§ãã¾ãã
let page = document.getElementById('buttonDiv'); const kButtonColors = ['#3aa757', '#e8453c', '#f9bb2d', '#4688f1']; function constructOptions(kButtonColors) { for (let item of kButtonColors) { let button = document.createElement('button'); button.style.backgroundColor = item; button.addEventListener('click', function() { chrome.storage.sync.set({color: item}, function() { console.log('color is ' + item); }) }); page.appendChild(button); } } constructOptions(kButtonColors);
ï¼ã¤ã®è²ã®é¸æè¢ããã£ã¦ï¼ãªãã·ã§ã³ãã¼ã¸å ã«ãã¿ã³ãçæããï¼onclickã¤ãã³ããªã¹ããä½ããã¾ãã
ã¦ã¼ã¶ããã¿ã³ãã¯ãªãã¯ããã¨ï¼æ¡å¼µæ©è½ã®storageå ã®å¤ï¼ã°ãã¼ãã«å¤ï¼ãæ¸ãæãã¾ãã
ãã®æ¡å¼µæ©è½ã®å
¨ãã¡ã¤ã«ã¯ï¼è²æ
å ±ã®å¤ãã°ãã¼ãã«å¤ã¨ãã¦ã®storageããåãåºãã¦ãã¾ãã®ã§ï¼ä»ã«ä½ãæ´æ°ãã¹ãå¤ã¯ããã¾ããã
è£è¶³
Googleã®ããã¥ã¡ã³ã翻訳ã«é¢ããã©ã¤ã»ã³ã¹ã»ããªã·ã¼ï¼
Site Policies | Google Developers
https://developers.google.com/terms/site-policies
- When you see a page with this notice you are free to use nearly everything on the page in your own creations. For example, you could quote the text in a book, cut-and-paste sections to your blog, record it as an audiobook for the visually impaired, or even translate it into Swahili. Really. That's what open content licenses are all about. We just ask that you give us attribution when you reuse our work. ï¼ã¹ã¯ããªèªã«ç¿»è¨³ãã¦ãè¯ãï¼
- You may also find the following notice on the bottom of some pages: Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License, and code samples are licensed under the Apache 2.0 License. For details, see our Site Policies.
Chromeæ¡å¼µæ©è½ã¨ã¯ï¼ï¼ãã©ã¦ã¶ã®ã¢ããªã³éçºã«é¢ããæ¥æ¬èªããã¥ã¡ã³ãï¼
â»æ¬è¨äºã¯ï¼ã¯ãã¼ã ã®ã¢ããªã³éçºã«é¢ããGoogleå ¬å¼ããã¥ã¡ã³ãWhat are extensions?ã®æ¥æ¬èªè¨³ã§ãã
Chromeã¢ããªã³ï¼æ¡å¼µæ©è½ï¼ã¨ã¯ã¹ãã³ã·ã§ã³ï¼ã¨ã¯ä½ã
ã¢ããªã³ã¨ã¯ï¼ãã©ã¦ã¶ä¸ã®åä½ï¼browsing experienceï¼ãã«ã¹ã¿ãã¤ãºããããã®å°ããªã½ããã¦ã§ã¢ã§ãã
ã¢ããªã³ã使ãã¨ï¼åã¦ã¼ã¶ã¯Chromeã®æ©è½ããèªå好ã¿ã«æ¹é ãã§ãã¾ããã
ãã©ã¦ã¶ã®åä½ãï¼ç´°ãããã¼ãºãè¨å®ã«åããã¦æ¹å¤ãããã¨ãã§ããã®ã§ãã
ã¢ããªã³ã¯ï¼HTMLãJavaScriptï¼CSSãªã©ã®Webç³»ãã¯ããã¸ã¼ã§ä½ããã¦ãã¾ãã
ï¼åï¼åã®Chromeã¢ããªã³ã¯ï¼ããããï¼åã®å°ããªï¼åä¸ã®ç®ç(single purpose)ãæãããããã«ä½æãããã¹ãã§ãã
åã¢ããªã³ãæããå½¹å²ã¯ï¼ç解ããããããã«è¨è¨ãã¾ãããã
ã²ã¨ã¤ã®ã¢ããªã³ã®ä¸ã«ï¼è¤æ°ã®è¦ç´ ï¼componentsï¼ãå¹
åºãæ©è½ãå«ãããã¨ãã§ãã¾ããï¼
ãã®å ´åã¯ï¼ãã¹ã¦ã®æ©è½ãã¢ããªã³ã®ãã¨ãã¨ã®éçºç®çãæãéããããã«å½¹ç«ã¤ããã«ãã¦ãã ããã
ã¢ããªã³ã®UIã¯ï¼æå°éãã¤æå³ã®ãããã®ã«ãã¦ãã ããã
Gmailãã§ãã«ã¼ã¢ããªã³ã®ããã«ï¼ãã©ã¦ã¶ã®ãã¼ä¸ã«ã·ã³ãã«ãªã¢ã¤ã³ã³ãä¸ã¤è¡¨ç¤ºããã ãã§ãè¯ãã§ãã
ã¾ãä¸æ¹ã§ï¼ãã©ã¦ã¶ã§è¡¨ç¤ºä¸ã®ãã¼ã¸ãã¾ããã¨æ¸ãæãã(override)ãããªï¼å¤§ããããªUIã®ã¢ããªã³ãããã§ãããã
ã¢ããªã³ã®ãã¡ã¤ã«ã¯ï¼ZIPå§ç¸®ããã¦ãæ¡å¼µå .crxãã®åä¸ããã±ã¼ã¸ã«ãªã£ã¦ãã¾ãã
ã¦ã¼ã¶ã¯ãã® .crx ãã¡ã¤ã«ãï¼ã¹ãã¢çãããã¦ã³ãã¼ãããã³ã¤ã³ã¹ãã¼ã«ãã¾ãã
ããã¯ã¤ã¾ãï¼Chromeã®ã¢ããªã³ã¯Webã¢ããªã¨ã¯ç°ãªãã¨ãããã¨ã§ãã
ã¢ããªã³ãåä½ããããã«å¿
è¦ãªãã¡ã¤ã«ã¯ããã±ã¼ã¸åããã¦ããï¼å¤é¨ã®Webãµã¤ããèªã¿è¾¼ãã§è¡¨ç¤ºãããã¨ã«ä¾åããæ§æã§ã¯ããã¾ããã
Chromeã¢ããªã³ã®ãããããã¼ã¯ï¼Chromeãããããã¼ã»ããã·ã¥ãã¼ãä¸ã§ã¢ããªã³ãã¢ãããã¼ããã¾ãã
ããã§ã¢ãããã¼ãããã¢ããªã³ã¯ï¼Chrome Webã¹ãã¢ä¸ã§å
¬éããã¾ãã
ãã詳細ãªæ
å ±ã¯ï¼ã¹ãã¢ã®éçºè
åãããã¥ã¡ã³ãããåç
§ãã ããã
Hello Extensionsï¼ã¢ããªã³éçºã»ã¯ããã®ä¸æ©ï¼
ããã§ã¯ Hello Extensions ã¨ããæçãªãµã³ãã«ãç´¹ä»ãã¾ãã
ã¢ããªã³éçºãå§ããããã®å°ããªä¸æ©ã§ãã
ã¾ãæ°ãããã©ã«ããä½æãï¼ããã«ã¢ããªã³éçºã®ããã«å¿
è¦ãªãã¡ã¤ã«ãæ ¼ç´ãããã¨ã«ãã¾ãããã
å¿
è¦ãªãã¡ã¤ã«ã¯ï¼ãµã³ãã«ç½®ãå ´ãããã¦ã³ãã¼ããã¦ãããã¨ãã§ãã¾ãã
æ°ãããã©ã«ããä½æãããï¼ãã®ãã©ã«ãã®ä¸ã« manifest.json ã¨ãããã¡ã¤ã«ãä½æãï¼ä¸è¨ã®ã³ã¼ããè¨è¼ãã¦ãã ããã
{ "name": "Hello Extensions", "description" : "Base Level Extension", "version": "1.0", "manifest_version": 2 }
å ¨ã¦ã®ã¢ããªã³ã«ï¼ãã®ãããªããããã§ã¹ãããå¿ è¦ã§ãã
ï¼ã»ã¨ãã©ã®ã¢ããªã³ã¯ï¼ãããã§ã¹ããä¸å¿ã«ä½ãããã§ã¯ããã¾ãããï¼
ä»åã®ãµã³ãã«ã§ã¯ï¼ããããããããããã«ãããã§ã¹ããã¡ã¤ã«ãä¸å¿ã«é²ãã¾ããï¼
ãã®ä¸ã®browser_actionãã£ã¼ã«ãã«è¿½è¨ãã¾ãããã
ãã®ã¢ããªã³ã®ãããã¢ãããã¡ã¤ã«ï¼ããã³ã¢ã¤ã³ã³ãã¡ã¤ã«ã®ãã¡ã¤ã«åãå®ç¾©ãããã¨ã«ãã¾ãã
ä¸è¨ã®ããã«è¨è¼ãã¦ãã ããã
{ "name": "Hello Extensions", "description" : "Base Level Extension", "version": "1.0", "manifest_version": 2, "browser_action": { // ããããä¸ãè¿½è¨ "default_popup": "hello.html", "default_icon": "hello_extensions.png" } }
ããã§æå®ãã hello_extensions.png ã¯ï¼ãã¡ããããã¦ã³ãã¼ãã§ãã¾ãã
hello.htmlã¯ï¼ä¸è¨ã®ãããªå 容ã§ä½æãã¦ãã ããã
<html> <body> <h1>Hello Extensions</h1> </body> </html>
ï¼ããã¾ã§ã§ï¼manifest.json ããã³png, htmlãã¡ã¤ã«ã®åè¨ï¼ãã¡ã¤ã«ãï¼ãã©ã«ãå ã«æ ¼ç´ããã¦ãããã¨ã«ãªãã¾ããï¼
ä»ä½ã£ã¦ããã®ã¯ï¼ãã¢ããªã³ã®ã¢ã¤ã³ã³ãã¯ãªãã¯ãããã¨ãã«ï¼hello.htmlã表示ãããã¨ããåä½ã§ãã
次ã®ã¹ãããã¨ãã¦ï¼ manifest.jsonãã®ä¸ã«ãã¼ãã¼ãã·ã§ã¼ãã«ãããè¨è¼ãã¾ãããã
ãã¼ãã¼ãã·ã§ã¼ãã«ããã¯å¿
é ã§ã¯ããã¾ãããï¼ããã¨ä¾¿å©ã§ãã
{ "name": "Hello Extensions", "description" : "Base Level Extension", "version": "1.0", "manifest_version": 2, "browser_action": { "default_popup": "hello.html", "default_icon": "hello_extensions.png" }, "commands": { // ããããä¸ãè¿½è¨ "_execute_browser_action": { "suggested_key": { "default": "Ctrl+Shift+F", "mac": "MacCtrl+Shift+F" }, "description": "Opens hello.html" } } }
æå¾ã®ã¹ãããã¯ï¼ããªãã®ãã¼ã«ã«ãã·ã³ä¸ã§ï¼Chromeã«ãã®ã¢ããªã³ãã¤ã³ã¹ãã¼ã«ãããã¨ã§ãã
Chrome㧠chrome://extensions ã«ç§»åãã¦ãã ãããï¼ã¢ãã¬ã¹ãã¼ã«æã¡è¾¼ãã°ç§»åã§ãã¾ãï¼
ç»é¢å³ä¸ã®ããããããã¼ã¢ã¼ãããONã«ãã¦ãã ããã
ãããã±ã¼ã¸åããã¦ããªãæ¡å¼µæ©è½ãèªã¿è¾¼ãããã¯ãªãã¯ãï¼ããªãããã£ãä½ã£ããHello Extensionsãã®ã¢ããªã³ã®ãã©ã«ããé¸ãã§ãã ããã
ããã§ï¼ã¢ããªã³ã®ã¤ã³ã¹ãã¼ã«ã®å®äºã§ãã
åä½ã試ãã«ã¯ï¼ãã©ã¦ã¶ä¸ã§è¡¨ç¤ºããã¦ãã hello_world.png ã®ã¢ã¤ã³ã³ãã¯ãªãã¯ãããï¼Ctrl+Shift+F ãæ¼ãã¦ãã ããããããã¢ããã«ããã¢ããªã³ã®åä½ã試ãã¾ãã
次ã®ã¹ããã
次ã®ãã¥ã¼ããªã¢ã«è¨äºï¼
Chromeã¢ããªã³ã®éçºãã¥ã¼ããªã¢ã«ã¨ãã¦ã¯ï¼ä¸è¨ã®è¨äºãå®è·µããããã®ã§ãåç
§ãã ããã
ä»ããï¼åã§ï¼Chromeãã©ã¦ã¶ã®ç¬èªã¢ããªã³ãèªä½ãã¦ã¿ãã ï¼jQueryã使ã£ãã¯ãã¼ã æ¡å¼µæ©è½ãï¼éçºããã³åä½ãã¹ãããå ¥éï¼ - 主ã«è¨èªã¨ã·ã¹ãã éçºã«é¢ãã¦
https://language-and-engineering.hatenablog.jp/entry/2015/10/22/%E4%BB%8A%E3%81%8B%E3%82%89%EF%BC%93%E5%88%86%E3%81%A7%EF%BC%8CChrome%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%81%AE%E7%8B%AC%E8%87%AA%E3%82%A2%E3%83%89%E3%82%AA%E3%83%B3%E3%82%92%E8%87%AA
è£è¶³
Googleã®ããã¥ã¡ã³ã翻訳ã«é¢ããã©ã¤ã»ã³ã¹ã»ããªã·ã¼ï¼
Site Policies | Google Developers
https://developers.google.com/terms/site-policies
- When you see a page with this notice you are free to use nearly everything on the page in your own creations. For example, you could quote the text in a book, cut-and-paste sections to your blog, record it as an audiobook for the visually impaired, or even translate it into Swahili. Really. That's what open content licenses are all about. We just ask that you give us attribution when you reuse our work. ï¼ã¹ã¯ããªèªã«ç¿»è¨³ãã¦ãè¯ãï¼
- You may also find the following notice on the bottom of some pages: Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License, and code samples are licensed under the Apache 2.0 License. For details, see our Site Policies.
Excelããã¯å ã®å ¨ã·ã¼ããï¼ï¼ãã¡ã¤ã«ãã¤ã«åãã¦ä¸æ¬ä¿åããããã ï¼ã·ã¼ãåä½ã§èªåãã¡ã¤ã«åå²ãï¼ï¼ã·ã¼ããã¨ã«ä¸æãã¡ã¤ã«åºåï¼
åä¸ã®Excelããã¯å ã«ï¼å¤§éã®ã¯ã¼ã¯ã·ã¼ããåå¨ããã¨ããã
ã·ã¼ãããã¾ãã«ãå¤ããã¦ï¼ããã¯ã®ãµã¤ãºãä½ã¡ã¬ã«ãè¨ãä¸ããã
ããã¦ï¼ããã¯ãï¼ãã¡ã¤ã«ã§ç®¡çããããªãã
ã·ã¼ããã¨ã«å¥ãã¡ã¤ã«ã«åããããã¨ãªãã
ããããå ´åï¼åã·ã¼ãã
ãèªåçã«åå¥ã®ãã¡ã¤ã«ã«åãã¦ãããããã¼ã«ãããã¨ä¾¿å©ã ã
ï¼ï¼ï¼ã·ã¼ãããã°ï¼ï¼ï¼ï¼åã®ãã¡ã¤ã«ã«åå²ãã¦ãããã»ã»ã»ã¨ããããã
ä¸è¨ã®ãããã§ï¼ããã«å®è¡ã§ããã
以ä¸ã®ã³ã¼ããã¡ã¢å¸³ã«ã³ãããï¼ãã·ã¼ããã¨ã«åå².batãã§ä¿åã
ããã¦ï¼ã·ã¼ããã¨ã«åå²ãããExcelãã¡ã¤ã«ã
ãã®ãããã«ããããããã°ããã
@if(0)==(0) ECHO OFF cscript.exe //nologo //E:JScript "%~f0" %* @pause GOTO :EOF @end /* ããããããExcelãã¡ã¤ã«ã®å ¨ã·ã¼ããï¼ ï¼ã·ã¼ããã¤åå¥ã®ãã¡ã¤ã«ã«ä¿åãç´ãããã */ // å¼æ°åå¾ if( WScript.Arguments.length == 0 ) { WScript.Echo("å¼æ°ãããã¾ããã"); WScript.Quit(); } var filename = WScript.Arguments.Unnamed(0); var ws = WScript.CreateObject("WScript.Shell"); var cwd = ws.CurrentDirectory; //var filepath = cwd + "\\" + filename; var filepath = filename; // Excelããã¯ãéã var excel = WScript.CreateObject("Excel.Application"); excel.Visible = true; excel.Workbooks.Open( filepath ); var book = excel.Workbooks( excel.Workbooks.Count ); // ã¯ã¼ã¯ããã¯ãåå¾ var xlMaximized = -4137; excel.ActiveWindow.WindowState = xlMaximized; // æ大å // å ¨ã·ã¼ããã¹ãã£ã³ãã¦ï¼ã·ã¼ãåãèª¿æ» var sheets = book.WorkSheets; var e = new Enumerator( sheets ); var arr_sheets = []; for( ; ! e.atEnd() ; e.moveNext() ) { // ã·ã¼ããåå¾ var sheet = e.item(); // ä¿æ arr_sheets.push( sheet ); } // åå¾æ¸ã¿ã®å ¨ã·ã¼ãã«ã¤ã㦠for( var i = 0; i < arr_sheets.length; i ++ ){ // æ°è¦ã¯ã¼ã¯ããã¯ãä½æ excel.Workbooks.Add(); var new_book = excel.Workbooks( excel.Workbooks.Count ); // ã¯ã¼ã¯ããã¯ãåå¾ // ã·ã¼ããå é ã«ã³ãã¼æ¿å ¥ //arr_sheets[i].Copy( new_book.Worksheets( new_book.Worksheets.Count ) ); arr_sheets[i].Copy( new_book.Worksheets( 1 ) ); // ä¸è¦ã·ã¼ããæ¶ãï¼Sheet1ï½Sheet3ï¼ new_book.Worksheets( 4 ).Delete(); new_book.Worksheets( 3 ).Delete(); new_book.Worksheets( 2 ).Delete(); // æ°è¦ãã¡ã¤ã«ä¿åããã¡ã¤ã«åã¯ã·ã¼ãå var new_filepath = cwd + "\\" + arr_sheets[i].Name + ".xlsx"; WScript.Echo( "æ°è¦ããã¯ã®ãã¹ï¼" + new_filepath ); new_book.SaveAs( new_filepath ); // éãã new_book.Close(); }
ãã®ã½ã¼ã¹ã¯ï¼MS-DOSï¼ã³ãã³ãããã³ããï¼ãããã®ä¸ã«ï¼WSH/JScriptã®ã³ã¼ããåãè¾¼ãã§è¨è¿°ãã¦ããã
Excelãã¡ã¤ã«ãããããããã¨ï¼ãããã®åå¨ãããã©ã«ãå ã«ï¼
åã·ã¼ããã¨ã«åå²ãããã¨ã¯ã»ã«ãä¸æã«çæã»ä¿åãããã
åèã«ãããã¼ã¸ï¼
JScript/WSH ã§ï¼Excelãã¡ã¤ã«ãèªã¿æ¸ãããã
http://language-and-engineering.hatenablog.jp/entry/20090717/p1
Excelããã¯ã®ãã·ã¼ãç®æ¬¡ããï¼èªåçã«ä½æããããããï¼WSH/JScriptã§ï¼åã·ã¼ãã¸ã®ãªã³ã¯ä»ãã®ç®æ¬¡ãèªåçæï¼
http://language-and-engineering.hatenablog.jp/entry/20110921/p1
BATã¨WSHã®ã³ã¼ãã1ãã¡ã¤ã«ã«æ··å¨ãããããã®shebangè¨æ³ï¼è¤éãªããããï¼ãã¡ã¤ã«ã§å®ç¾ï¼
http://computer-technology.hateblo.jp/entry/20131025/p1
é¢é£ããè¨äºï¼
WSH/JScriptã§ï¼Excelãã¡ã¤ã«ãèªã¿æ¸ãããéã®ãã³ãã¬ã¼ããï¼ã·ã¼ãä¸ã®å
¨è¡ãèªã¿æ¸ãããã³ã¼ãã®ã²ãªåï¼ - 主ã«è¨èªã¨ã·ã¹ãã éçºã«é¢ãã¦
http://language-and-engineering.hatenablog.jp/entry/20140214/p1
ããã¥ã¡ã³ãä½æã楽ã«ããããã®ï¼Excel VBA é »åºï¼ãã¿ã¼ã³ - 主ã«è¨èªã¨ã·ã¹ãã éçºã«é¢ãã¦
http://language-and-engineering.hatenablog.jp/entry/20090401/p1
Excelã·ã¼ããèªã¿åã£ã¦ï¼INSERTæSQLãçæããããããï¼Kingsoft SpreadsheetãWSH/JScriptã§èªåæä½ï¼ - 主ã«è¨èªã¨ã·ã¹ãã éçºã«é¢ãã¦
http://language-and-engineering.hatenablog.jp/entry/20121218/p1
Excel VBAã®ãã¯ããï¼è¤æ°ã®ããã¯ããå©ç¨ããæ¹æ³ ï¼æ¨æºã¢ã¸ã¥ã¼ã«ãããã¯ã®å¤é¨ã§ç®¡çãã¦ï¼å
±éã©ã¤ãã©ãªã¨ãã¦èªã¿è¾¼ã¿ï¼ - 主ã«è¨èªã¨ã·ã¹ãã éçºã«é¢ãã¦
http://language-and-engineering.hatenablog.jp/entry/20090731/p1