【学習メモ】Chrome拡張機能の練習！「背景色を変更」することができるプラグインの【ソースコード】

Chrome拡張機能の概要

右クリックのメニューから「背景色を変更」することができる、Chrome拡張機能です。

Blue

Green

Red

ソースコードまとめ

manifest.json

{
	"manifest_version": 2,
	"name": "Change background color with context menus",
	"version": "1.0",

	"background": {
		"scripts": ["event.js"],
		"presistent":false
	},

	"permissions": [
		"activeTab",
		"contextMenus"
	]
}

event.js

'use strict';

chrome.runtime.onInstalled.addListener(function() {
	var parent = chrome.contextMenus.create({
		id: 'parent',
		title: 'Choose Background Color'
	});
	chrome.contextMenus.create({
		id: 'red',
		parentId: parent,
		title: 'Red'
	});
	chrome.contextMenus.create({
		id: 'blue',
		parentId: parent,
		title: 'Blue'
	});
	chrome.contextMenus.create({
		id: 'green',
		parentId: parent,
		title: 'Green'
	});
});

chrome.contextMenus.onClicked.addListener(function(item) {
	chrome.tabs.executeScript({
		code: 'document.body.style.backgroundColor = "' +
		item.menuItemId + '"'
	});
});