browser extension の設定ページ
はじめに
Firefoxのaddon用設定ページ作成して javascript で値を使えるようにします。
設定ページと値の取得コード
メモ
* 値を取得したあとにjavascript中で使うのにはグローバル変数でないといけない。
* Javaとは変数のスコープが違う。
* 1回目の実行時には値が取れていなかったので、グローバルスコープで browser.storage.local.get を実行した。
以下のファイルを options とかのディレクトリに配置してつかいます。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form>
<label>name<input type="text" id="name" ></label>
<button type="submit">Save</button>
</form>
<script src="options.js"></script>
</body>
</html>
function saveOptions(e) {
e.preventDefault();
browser.storage.local.set({
name: document.querySelector("#name").value
});
}
function restoreOptions() {
function setCurrentChoice(result) {
document.querySelector("#name").value = result.name || "blue";
}
function onError(error) {
console.log("Error: ${error}");
}
var getting = browser.storage.local.get("name");
getting.then(setCurrentChoice, onError);
}
document.addEventListener("DOMContentLoaded", restoreOptions);
document.querySelector("form").addEventListener("submit", saveOptions);
browser.contextMenus.create({
id: "name",
title: "get name",
contexts: ["selection"]
});
var name = "blue";
browser.contextMenus.onShown.addListener(info => {
getting = browser.storage.local.get("name", function (value) {
name = value.name;
console.log("getting " + name);
});
});
browser.contextMenus.onClicked.addListener((info, tab) => {
if (info.menuItemId === "name" ){
console.log(name);
}
});
{
"manifest_version": 2,
"name": "Sample Tool",
"description": "Sample Tool for Firefox",
"version": "1.0",
"homepage_url": "https://sample.com",
"icons": {
"48": "icons/sample.png"
},
"applications": {
"gecko": {
"id": "[email protected]",
"strict_min_version": "42.0",
"update_url":"https://sample.com/"
}
},
"background": {
"scripts": [
"background.js"
]
},
"options_ui": {
"page": "options.html"
},
"permissions": [
"contextMenus",
"storage"
],
"content_scripts": [
{
"matches": [
"https://qiita.com/keniooi/*"
],
"js": [
"sample.js"
]
}
]
}
icon/sample.png
sample.js << 空ファイルでよい
が他に必要になります。
参考
https://developer.mozilla.org/ja/Add-ons/WebExtensions/Implement_a_settings_page
https://msdn.microsoft.com/ja-jp/library/bzt2dkta(v=vs.94).aspx
https://github.com/mdn/webextensions-examples/blob/master/menu-labelled-open/background.js
Author And Source
この問題について(browser extension の設定ページ), 我々は、より多くの情報をここで見つけました https://qiita.com/keniooi/items/33965fbdffb5f67d10ae著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .