AprilSylph · marcustyphoon · Jun 10, 2024 · Jun 10, 2024 · Jun 19, 2024 · Jun 19, 2024
diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
@@ -29,7 +29,6 @@ jobs:
         env:
           WEB_EXT_API_KEY: ${{ secrets.WEB_EXT_API_KEY }}
           WEB_EXT_API_SECRET: ${{ secrets.WEB_EXT_API_SECRET }}
-          WEB_EXT_ID: ${{ secrets.WEB_EXT_ID }}
   chrome:
     name: Chrome
     runs-on: ubuntu-latest

diff --git a/src/browser_action/permissions_banner.js b/src/browser_action/permissions_banner.js
@@ -0,0 +1,13 @@
+const permissionsBannerElement = document.getElementById('permissions-banner');
+const permissionsButton = document.getElementById('grant-host-permission');
+const updatePermissionsBannerVisibility = hasHostPermission => {
+  permissionsBannerElement.hidden = hasHostPermission;
+};
+permissionsButton.addEventListener('click', () => {
+  browser.permissions
+    .request({ origins: ['*://www.tumblr.com/*'] })
+    .then(updatePermissionsBannerVisibility);
+});
+browser.permissions
+  .contains({ origins: ['*://www.tumblr.com/*'] })
+  .then(updatePermissionsBannerVisibility);
diff --git a/src/browser_action/popup.css b/src/browser_action/popup.css
@@ -70,7 +70,7 @@ label ~ label {
   margin-top: 1ch;
 }
 
-button {
+main button {
   padding: 0;
   border: none;
   margin: 0;
@@ -124,3 +124,32 @@ a {
 select:not([data-value="custom"]) ~ :is([for="font-family-custom"], [id="font-family-custom"]) {
   display: none;
 }
+
+#permissions-banner {
+  box-sizing: border-box;
+  width: 375px;
+  min-width: 100%;
+  max-width: 100%;
+  padding: 8px 4px;
+  border-bottom: 1px solid rgb(var(--active-grey));
+
+  text-align: center;
+}
+
+#grant-host-permission {
+  display: block;
+  padding: 0.5ch 1ch;
+  border-radius: 0.5ch;
+  margin: 8px auto 0;
+
+  font-family: 'Courier New', Courier, monospace;
+  line-height: 1;
+}
+
+#grant-host-permission:focus {
+  outline: 2px solid rgb(var(--accent));
+}
+
+#permissions-banner:not([hidden]) + #embedded-banner {
+  display: none;
+}
diff --git a/src/browser_action/popup.html b/src/browser_action/popup.html
@@ -7,6 +7,10 @@
     <link rel="stylesheet" href="popup.css">
   </head>
   <body>
+    <header id="permissions-banner" hidden>
+      &#x26A0;&#xFE0F; Palettes for Tumblr needs additional permissions in order to apply palettes automatically.
+      <button id="grant-host-permission">Always allow on www.tumblr.com</button>
+    </header>
     <main>
       <div>
         <label for="palette">
@@ -53,5 +57,6 @@ <h4>Change Palette</h4>
     <script src="render_palettes.js"></script>
     <script src="render_font_family.js"></script>
     <script src="render_font_size.js"></script>
+    <script src="permissions_banner.js"></script>
   </body>
 </html>
diff --git a/src/manifest.json b/src/manifest.json
@@ -1,5 +1,5 @@
 {
-	"manifest_version": 2,
+	"manifest_version": 3,
 	"name": "Palettes for Tumblr",
 	"version": "1.1.0",
 
@@ -10,8 +10,7 @@
     "128": "icons/128.png"
   },
 
-	"browser_action": {
-    "browser_style": true,
+	"action": {
     "default_icon": {
       "16": "icons/16.png",
       "48": "icons/48.png",
@@ -39,15 +38,19 @@
     "open_in_tab": true
   },
   "permissions": [ "storage" ],
-  "web_accessible_resources": [ "palettes.json", "paletteData.json" ],
+  "web_accessible_resources": [{
+    "resources": [ "palettes.json", "paletteData.json" ],
+    "matches": [ "*://www.tumblr.com/*" ]
+  }],
 
-	"minimum_chrome_version": "38",
+	"minimum_chrome_version": "88",
   "browser_specific_settings": {
     "gecko": {
-      "strict_min_version": "113.0"
+      "id": "{04b5e1e9-3044-41fd-be51-e8915008ad16}",
+      "strict_min_version": "120.0"
     },
     "gecko_android": {
-      "strict_min_version": "113.0"
+      "strict_min_version": "120.0"
     }
   }
 }
diff --git a/src/options/modules/permissions_banner.js b/src/options/modules/permissions_banner.js
@@ -0,0 +1,13 @@
+const permissionsBannerElement = document.getElementById('permissions-banner');
+const permissionsButton = document.getElementById('grant-host-permission');
+const updatePermissionsBannerVisibility = hasHostPermission => {
+  permissionsBannerElement.hidden = hasHostPermission;
+};
+permissionsButton.addEventListener('click', () => {
+  browser.permissions
+    .request({ origins: ['*://www.tumblr.com/*'] })
+    .then(updatePermissionsBannerVisibility);
+});
+browser.permissions
+  .contains({ origins: ['*://www.tumblr.com/*'] })
+  .then(updatePermissionsBannerVisibility);
diff --git a/src/options/ui.css b/src/options/ui.css
@@ -329,3 +329,32 @@ input[type="text"]:disabled {
 #select-all { grid-column: 1 / 2; }
 #select-none { grid-column: 2 / 3; }
 #export-list, #save-file { grid-column: 1 / 3; }
+
+#permissions-banner {
+  box-sizing: border-box;
+  width: 375px;
+  min-width: 100%;
+  max-width: 100%;
+  padding: 8px 4px;
+  border-bottom: 1px solid rgb(var(--active-grey));
+
+  text-align: center;
+}
+
+#grant-host-permission {
+  display: block;
+  padding: 0.5ch 1ch;
+  border-radius: 0.5ch;
+  margin: 8px auto 0;
+
+  font-family: 'Courier New', Courier, monospace;
+  line-height: 1;
+}
+
+#grant-host-permission:focus {
+  outline: 2px solid rgb(var(--accent));
+}
+
+#permissions-banner:not([hidden]) + #embedded-banner {
+  display: none;
+}
diff --git a/src/options/ui.html b/src/options/ui.html
@@ -83,6 +83,10 @@ <h1>Transfer palettes</h1>
         </section>
       </aside>
       <main>
+        <header id="permissions-banner" hidden>
+          &#x26A0;&#xFE0F; Palettes for Tumblr needs additional permissions in order to apply palettes automatically.
+          <button id="grant-host-permission">Always allow on www.tumblr.com</button>
+        </header>
         <form id="palette-form">
           <fieldset>
             <div>

diff --git a/src/options/ui.js b/src/options/ui.js
@@ -1,6 +1,7 @@
 import { exportList } from './modules/backup.js';
 import { hexToRgb, rgbToHex } from './modules/color.js';
 import { getTimestamp } from './modules/datetime.js';
+import './modules/permissions_banner.js';
 
 const { getURL } = browser.runtime;
 const getBuiltInPaletteList = fetch(getURL('/palettes.json')).then(response => response.json());