Notify changes with a desltop notification instead of a startup tab

webextensions/_locales/en/messages.json

@@ -22,6 +22,14 @@
  "notPermitted_clipboardWrite_message": { "message": "Failed to get permissions to write data to the clipboard. Please grant permissions via the configurations of Multiple Tab Handler." },
 
 
+ "startup_notification_title_legacy": { "message": "About revived Multiple Tab Handler" },
+ "startup_notification_message_legacy": { "message": "The operation to select tabs is totally changed. Please click here to see explanations." },
+ "startup_notification_title_installed": { "message": "For newcomer of Multiple Tab Handler" },
+ "startup_notification_message_installed": { "message": "Some extra permissions are required for more natural user experiences. Please click here to grant them." },
+ "startup_notification_title_updated": { "message": "Noticeable Changes on Multiple Tab Handler" },
+ "startup_notification_message_updated": { "message": "Some changes may affect to your use case. Please click here to see explanations." },
+
+
  "panelTitle": { "message": "Select Tabs by Dragging" },
  "panelCaptionTop": { "message": "Select Tabs" },
  "panelCaptionBottom": { "message": "And Right-Click to Choose Action" },

webextensions/_locales/ja/messages.json

@@ -22,6 +22,14 @@
  "notPermitted_clipboardWrite_message": { "message": "クリップボードへのデータの書き込みに必要な権限を取得できませんでした。Multiple Tab Handlerの設定画面で権限を設定して下さい。" },
 
 
+ "startup_notification_title_legacy": { "message": "生まれ変わったMultiple Tab Handlerについて" },
+ "startup_notification_message_legacy": { "message": "タブの選択法法が大幅に変わりました。ここをクリックして補足説明を確認してください。" },
+ "startup_notification_title_installed": { "message": "Multiple Tab Handlerを使い始める方へ" },
+ "startup_notification_message_installed": { "message": "より自然な操作感を得るためには、追加の権限を許可する必要があります。ここをクリックして権限を設定してください。" },
+ "startup_notification_title_updated": { "message": "Multiple Tab Handlerの動作が変わりました" },
+ "startup_notification_message_updated": { "message": "操作感に影響する大きな変更がありました。ここをクリックして補足説明を確認してください。" },
+
+
  "panelTitle": { "message": "タブをドラッグして選択" },
  "panelCaptionTop": { "message": "タブを選択してください" },
  "panelCaptionBottom": { "message": "その後、右クリックして操作を選択" },

webextensions/background/background.js

@@ -8,6 +8,7 @@
 import {
  log,
  configs,
+ notify,
  handleMissingReceiverError
 } from '/common/common.js';
 import * as Constants from '/common/constants.js';
@@ -435,24 +436,20 @@ async function notifyNewFeatures() {
  */
 
  const featuresVersion = kFEATURES_VERSION /*+ featuresVersionOffset*/;
+ const isInitialInstall = configs.notifiedFeaturesVersion == 0;
 
  if (configs.notifiedFeaturesVersion >= featuresVersion)
  return false;
  configs.notifiedFeaturesVersion = featuresVersion;
 
- const tab = await browser.tabs.create({
- url: browser.extension.getURL('resources/notify-features.html'),
- active: true
- });
- const title = `${browser.i18n.getMessage('extensionName')} ${browser.runtime.getManifest().version}`
- const description = browser.i18n.getMessage('message_newFeatures_description');
- browser.tabs.executeScript(tab.id, {
- code: `
- document.querySelector('#title').textContent = document.title = ${JSON.stringify(title)};
- document.querySelector('#description').innerHTML = ${JSON.stringify(description)};
- location.replace('data:text/html,' + encodeURIComponent(document.documentElement.innerHTML));
- `
+ const suffix = isInitialInstall ? 'installed' : 'updated';
+ notify({
+ url: browser.extension.getURL(`resources/notify-features.html?${suffix}`),
+ title: browser.i18n.getMessage(`startup_notification_title_${suffix}`),
+ message: browser.i18n.getMessage(`startup_notification_message_${suffix}`),
+ timeout: 90 * 1000
  });
+
  return true;
 }
 
@@ -461,28 +458,11 @@ async function notifyUpdatedFromLegacy() {
  return false;
  configs.shouldNotifyUpdatedFromLegacyVersion = false;
 
- const tab = await browser.tabs.create({
- url: browser.extension.getURL('resources/notify-features.html'),
- active: true
- });
- const title = `${browser.i18n.getMessage('extensionName')} ${browser.runtime.getManifest().version}`
- const description = browser.i18n.getMessage('message_updatedFromLegacy_description');
- browser.tabs.executeScript(tab.id, {
- code: `
- document.querySelector('#title').textContent = document.title = ${JSON.stringify(title)};
- document.querySelector('#description').innerHTML = ${JSON.stringify(description)};
- location.replace('data:text/html,' + encodeURIComponent(document.documentElement.innerHTML));
- `
- });
-
- browser.runtime.onMessage.addListener(function onMessage(message, _sender) {
- if (message &&
- typeof message.type == 'string' &&
- message.type == Constants.kCOMMAND_NOTIFY_PANEL_SHOWN) {
- browser.runtime.onMessage.removeListener(onMessage);
- browser.tabs.remove(tab.id)
- .catch(_e => {}); // ignore already closed tab
- }
+ notify({
+ url: browser.extension.getURL(`resources/notify-features.html?legacy`),
+ title: browser.i18n.getMessage(`startup_notification_title_legacy`),
+ message: browser.i18n.getMessage(`startup_notification_message_legacy`),
+ timeout: 90 * 1000
  });
 }
 

webextensions/common/common.js

@@ -92,7 +92,7 @@ export async function wait(task = 0, timeout = 0) {
 export async function notify({ icon, title, message, timeout, url } = {}) {
  const id = await browser.notifications.create({
  type: 'basic',
- iconUrl: icon,
+ iconUrl: icon || browser.extension.getURL(`resources/64x64.svg`),
  title,
  message
  });

webextensions/resources/module/.eslintrc.js

@@ -0,0 +1,15 @@
+/*
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+*/
+/*eslint-env commonjs*/
+/*eslint quote-props: ['error', "always"] */
+
+'use strict';
+
+module.exports = {
+ 'extends': [
+ '../../tools/eslint/for-module.js',
+ ],
+};

webextensions/resources/module/notify-features.js

@@ -0,0 +1,20 @@
+/*
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+*/
+'use strict';
+
+window.addEventListener('DOMContentLoaded', () => {
+ const type = /(legacy|installed|updated)/i.test(location.search) && String(RegExp.$1).toLowerCase();
+
+ const title = `${browser.i18n.getMessage('extensionName')} ${browser.runtime.getManifest().version}`;
+ const description = browser.i18n.getMessage(
+ type == 'legacy' ?
+ 'message_updatedFromLegacy_description' :
+ 'message_newFeatures_description'
+ );
+
+ document.querySelector('#title').textContent = document.title = title;
+ document.querySelector('#description').innerHTML = description;
+}, { once: true });

webextensions/resources/notify-features.html

@@ -2,6 +2,7 @@
 <meta charset="UTF-8">
 <link rel="icon" href="./16x16-light.svg">
 <title></title>
+<script type="module" src="./module/notify-features.js"></script>
 <style type="text/css">
  body {
  background: white;