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

Technology
スポンサーリンク

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 + '"'
	});
});

 

 

おさかなへの応援メッセージ!おさかなに聞きたい事、質問!記事にしてほしい内容!などを大募集中!

「氏名」「メールアドレス」「内容」の3点をご記入の上「osakana1699@gmail.com」までご応募ください!

この記事は役に立ちましたか?

タイトルとURLをコピーしました