+
-
+
Move active tab to the beginning of the window
-
-
-
-
-
+
+
```
@@ -150,7 +140,7 @@ document.addEventListener("DOMContentLoaded", listTabs);
```js
function getCurrentWindowTabs() {
- return browser.tabs.query({currentWindow: true});
+ return browser.tabs.query({ currentWindow: true });
}
```
@@ -179,24 +169,23 @@ function listTabs() {
1. {{WebExtAPIRef("tabs.Tab")}} オブジェクトからの最初の 5 項目でループする。
2. 各項目ごとに、文書のフラグメントのハイパーリンクを追加する。
- - リンクのラベル—つまり、そのテキスト—が、タブのタイトル (ない場合はその ID)を使って、セットされる
- - タブの ID を使ってリンクのアドレスがセットされる。
+ - リンクのラベル—つまり、そのテキスト—が、タブのタイトル (ない場合はその ID)を使って、セットされる
+ - タブの ID を使ってリンクのアドレスがセットされる。
```js
- for (let tab of tabs) {
- if (!tab.active && counter <= limit) {
- let tabLink = document.createElement('a');
+for (let tab of tabs) {
+ if (!tab.active && counter <= limit) {
+ let tabLink = document.createElement("a");
- tabLink.textContent = tab.title || tab.id;
+ tabLink.textContent = tab.title || tab.id;
- tabLink.setAttribute('href', tab.id);
- tabLink.classList.add('switch-tabs');
- currentTabs.appendChild(tabLink);
- }
-
- counter += 1;
+ tabLink.setAttribute("href", tab.id);
+ tabLink.classList.add("switch-tabs");
+ currentTabs.appendChild(tabLink);
+ }
- }
+ counter += 1;
+}
```
最後に、`tabs-list` div に文書のフラグメントが書き込まれる:
@@ -282,16 +271,18 @@ None of the functions require a permission to operate, so there are no features
tabs.html defines the "menu" displayed in the popup, which includes the "Move active tab to the beginning of the window list" option, with a series of `
` tags grouped by a visual separator. Each menu item is given an ID, which is used in tabs.js to determine which menu item is being requested.
```html
- Move active tab to the beginning of the window
-
Move active tab to the end of the window
-
-
+
Move active tab to the beginning of the window
+
Move active tab to the end of the window
+
-
Duplicate active tab
+
Duplicate active tab
-
Reload active tab
-
Alert active tab info
+
Reload active tab
+
Alert active tab info
```
#### [tabs.js](https://github.com/mdn/webextensions-examples/blob/master/tabs-tabs-tabs/tabs.js)
@@ -318,16 +309,16 @@ A series of `if` statements then look to match the ID of the item clicked.
This code snippet is for the "Move active tab to the beginning of the window list" option:
```js
- if (e.target.id === "tabs-move-beginning") {
- callOnActiveTab((tab, tabs) => {
- var index = 0;
- if (!tab.pinned) {
- index = firstUnpinnedTab(tabs);
- }
- console.log(`moving ${tab.id} to ${index}`)
- browser.tabs.move([tab.id], {index});
- });
- }
+if (e.target.id === "tabs-move-beginning") {
+ callOnActiveTab((tab, tabs) => {
+ var index = 0;
+ if (!tab.pinned) {
+ index = firstUnpinnedTab(tabs);
+ }
+ console.log(`moving ${tab.id} to ${index}`);
+ browser.tabs.move([tab.id], { index });
+ });
+}
```
It's worth noting the use of `console.log()`. This enables you to output information to the [debugger](/ja/docs/Mozilla/Add-ons/WebExtensions/Debugging) console, which can be useful when resolving issues found during development.
@@ -337,15 +328,15 @@ It's worth noting the use of `console.log()`. This enables you to output informa
The move code first calls `callOnActiveTab()` which in turn calls `getCurrentWindowTabs()` to get a {{WebExtAPIRef("tabs.Tab")}} object containing the active window's tabs. It then loops through the object to find and return the active tab object:
```js
- function callOnActiveTab(callback) {
- getCurrentWindowTabs().then((tabs) => {
- for (var tab of tabs) {
- if (tab.active) {
- callback(tab, tabs);
- }
- }
- });
- }
+function callOnActiveTab(callback) {
+ getCurrentWindowTabs().then((tabs) => {
+ for (var tab of tabs) {
+ if (tab.active) {
+ callback(tab, tabs);
+ }
+ }
+ });
+}
```
##### ピン止めされたタブ
@@ -354,18 +345,18 @@ A feature of tabs is that the user can _pin_ tabs in a window. Pinned tabs are p
```js
function firstUnpinnedTab(tabs) {
- for (var tab of tabs) {
- if (!tab.pinned) {
- return tab.index;
- }
- }
+ for (var tab of tabs) {
+ if (!tab.pinned) {
+ return tab.index;
+ }
+ }
}
```
We now have everything needed to move the tab: the active tab object from which we can get the tab ID and the position the tab is to be moved to. So, we can implement the move:
```js
- browser.tabs.move([tab.id], {index});
+browser.tabs.move([tab.id], { index });
```
The remaining functions to duplicate, reload, create, and remove tabs are implemented similarly.
@@ -462,27 +453,21 @@ The latter is the most useful, as it allows an extension to use {{WebExtAPIRef("
{
"description": "Adds a page action to toggle applying CSS to pages.",
- "manifest_version": 2,
- "name": "apply-css",
- "version": "1.0",
- "homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/apply-css",
-
- "background": {
+ "manifest_version": 2,
+ "name": "apply-css",
+ "version": "1.0",
+ "homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/apply-css",
+ "background": {
"scripts": ["background.js"]
- },
-
- "page_action": {
+ },
+ "page_action": {
"default_icon": "icons/off.svg",
"browser_style": true
- },
-
- "permissions": [
- "activeTab",
- "tabs"
- ]
+ },
+ "permissions": ["activeTab", "tabs"]
}
```
@@ -510,9 +495,9 @@ When first loaded, the extension uses {{WebExtAPIRef("tabs.query")}} to get a li
var gettingAllTabs = browser.tabs.query({});
gettingAllTabs.then((tabs) => {
- for (let tab of tabs) {
- initializePageAction(tab);
- }
+ for (let tab of tabs) {
+ initializePageAction(tab);
+ }
});
```
@@ -520,9 +505,9 @@ gettingAllTabs.then((tabs) => {
```js
function protocolIsApplicable(url) {
- var anchor = document.createElement('a');
- anchor.href = url;
- return APPLICABLE_PROTOCOLS.includes(anchor.protocol);
+ var anchor = document.createElement("a");
+ anchor.href = url;
+ return APPLICABLE_PROTOCOLS.includes(anchor.protocol);
}
```
@@ -530,12 +515,11 @@ Then, if the example can act on the tab, `initializePageAction()` sets the tab's
```js
function initializePageAction(tab) {
-
- if (protocolIsApplicable(tab.url)) {
- browser.pageAction.setIcon({tabId: tab.id, path: "icons/off.svg"});
- browser.pageAction.setTitle({tabId: tab.id, title: TITLE_APPLY});
- browser.pageAction.show(tab.id);
- }
+ if (protocolIsApplicable(tab.url)) {
+ browser.pageAction.setIcon({ tabId: tab.id, path: "icons/off.svg" });
+ browser.pageAction.setTitle({ tabId: tab.id, title: TITLE_APPLY });
+ browser.pageAction.show(tab.id);
+ }
}
```
@@ -559,24 +543,21 @@ browser.pageAction.onClicked.addListener(toggleCSS);
```js
function toggleCSS(tab) {
-
-
- function gotTitle(title) {
-
+ function gotTitle(title) {
if (title === TITLE_APPLY) {
- browser.pageAction.setIcon({tabId: tab.id, path: "icons/on.svg"});
- browser.pageAction.setTitle({tabId: tab.id, title: TITLE_REMOVE});
- browser.tabs.insertCSS({code: CSS});
+ browser.pageAction.setIcon({ tabId: tab.id, path: "icons/on.svg" });
+ browser.pageAction.setTitle({ tabId: tab.id, title: TITLE_REMOVE });
+ browser.tabs.insertCSS({ code: CSS });
} else {
- browser.pageAction.setIcon({tabId: tab.id, path: "icons/off.svg"});
- browser.pageAction.setTitle({tabId: tab.id, title: TITLE_APPLY});
- browser.tabs.removeCSS({code: CSS});
+ browser.pageAction.setIcon({ tabId: tab.id, path: "icons/off.svg" });
+ browser.pageAction.setTitle({ tabId: tab.id, title: TITLE_APPLY });
+ browser.tabs.removeCSS({ code: CSS });
}
- }
+ }
- var gettingTitle = browser.pageAction.getTitle({tabId: tab.id});
+ var gettingTitle = browser.pageAction.getTitle({ tabId: tab.id });
- gettingTitle.then(gotTitle);
+ gettingTitle.then(gotTitle);
}
```
@@ -584,7 +565,7 @@ Finally, to ensure that the `pageAction` is valid after each update to the tab,
```js
browser.tabs.onUpdated.addListener((id, changeInfo, tab) => {
- initializePageAction(tab);
+ initializePageAction(tab);
});
```
diff --git a/files/ja/mozilla/add-ons/webextensions/your_first_webextension/index.md b/files/ja/mozilla/add-ons/webextensions/your_first_webextension/index.md
index 363181aec66e62..bf87472368ecec 100644
--- a/files/ja/mozilla/add-ons/webextensions/your_first_webextension/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/your_first_webextension/index.md
@@ -26,7 +26,6 @@ cd borderify
```json
{
-
"manifest_version": 2,
"name": "Borderify",
"version": "1.0",
@@ -43,7 +42,6 @@ cd borderify
"js": ["borderify.js"]
}
]
-
}
```
diff --git a/files/ja/mozilla/add-ons/webextensions/your_second_webextension/index.md b/files/ja/mozilla/add-ons/webextensions/your_second_webextension/index.md
index 84b4a2ccb07ad9..1d052596e268b1 100644
--- a/files/ja/mozilla/add-ons/webextensions/your_second_webextension/index.md
+++ b/files/ja/mozilla/add-ons/webextensions/your_second_webextension/index.md
@@ -65,9 +65,7 @@ cd beastify
"48": "icons/beasts-48.png"
},
- "permissions": [
- "activeTab"
- ],
+ "permissions": ["activeTab"],
"browser_action": {
"default_icon": "icons/beasts-32.png",
@@ -141,7 +139,7 @@ touch choose_beast.html choose_beast.css choose_beast.js
HTML ファイルは次のようになります。
```html
-
+
@@ -190,19 +188,19 @@ button {
text-align: center;
font-size: 1.5em;
cursor: pointer;
- background-color: #E5F2F2;
+ background-color: #e5f2f2;
}
button:hover {
- background-color: #CFF2F2;
+ background-color: #cff2f2;
}
button[type="reset"] {
- background-color: #FBFBC9;
+ background-color: #fbfbc9;
}
button[type="reset"]:hover {
- background-color: #EAEA9D;
+ background-color: #eaea9d;
}
```
@@ -249,7 +247,7 @@ function listenForClicks() {
let url = beastNameToURL(e.target.textContent);
browser.tabs.sendMessage(tabs[0].id, {
command: "beastify",
- beastURL: url
+ beastURL: url,
});
});
}