extension-create 4.1.32 → 4.1.33

package/dist/module.cjs

@@ -783,7 +783,7 @@ const NETWORK_TIMEOUT_MS = (()=>{
     return Number.isFinite(raw) && raw > 0 ? raw : 60000;
 })();
 const CODELOAD_BASE = 'https://codeload.github.com/extension-js/examples/zip';
-const DEFAULT_TEMPLATES_REF = '2a8c4bae43ba6e883bf9ce7f6d108963ed162516';
+const DEFAULT_TEMPLATES_REF = 'd69e46b311c27d11a98d241494023101b337281f';
 const BUNDLED_TEMPLATES = [
     "javascript"
 ];

package/dist/steps/import-external-template.d.ts

@@ -1,4 +1,4 @@
-export declare const DEFAULT_TEMPLATES_REF = "2a8c4bae43ba6e883bf9ce7f6d108963ed162516";
+export declare const DEFAULT_TEMPLATES_REF = "d69e46b311c27d11a98d241494023101b337281f";
 export declare const BUNDLED_TEMPLATES: readonly string[];
 export declare const DEFAULT_TEMPLATE_NAME = "typescript";
 export declare const OFFLINE_FALLBACK_TEMPLATE = "javascript";

package/dist/test-template-javascript/.extension-create.json

@@ -1,5 +1,5 @@
 {
-  "createdWith": "extension-create@4.1.31",
+  "createdWith": "extension-create@4.1.32",
   "template": "typescript",
-  "source": "http://127.0.0.1:41135/examples.zip"
+  "source": "http://127.0.0.1:36711/examples.zip"
 }

package/dist/test-template-javascript/package.json

@@ -14,7 +14,7 @@
   },
   "dependencies": {},
   "devDependencies": {
-    "extension": "^4.1.31"
+    "extension": "^4.1.32"
   },
   "packageManager": "pnpm@10.28.0",
   "pnpm": {

package/package.json

@@ -25,7 +25,7 @@
     "templates"
   ],
   "name": "extension-create",
-  "version": "4.1.32",
+  "version": "4.1.33",
   "description": "The standalone extension creation engine for Extension.js",
   "author": {
     "name": "Cezar Augusto",

package/templates/javascript/README.md

@@ -43,6 +43,7 @@ src/
 │   └── icon.png
 ├── sidebar/
 │   ├── index.html
+│   ├── page-title.js
 │   ├── scripts.js
 │   ├── SidebarApp.js
 │   └── styles.css

package/templates/javascript/src/content/scripts.js

@@ -31,11 +31,22 @@ export default function initial() {
   const container = createContentApp()
   shadowRoot.appendChild(container)
 
+  // The sidebar asks this page for its title over runtime messaging, and the
+  // answer leaves with the UI on teardown so a reload never answers twice.
+  chrome.runtime.onMessage.addListener(answerPageTitle)
+
   return () => {
+    chrome.runtime.onMessage.removeListener(answerPageTitle)
     rootDiv.remove()
   }
 }
 
+function answerPageTitle(message, _sender, sendResponse) {
+  if (!message || message.type !== 'getPageTitle') return
+
+  sendResponse({title: document.title, url: location.href})
+}
+
 async function fetchCSS() {
   const cssUrl = new URL('./styles.css', import.meta.url)
   const response = await fetch(cssUrl)

package/templates/javascript/src/manifest.json

@@ -49,7 +49,8 @@
     "default_title": "Side Panel Content",
     "browser_style": false
   },
-  "chromium:permissions": ["sidePanel"],
+  "chromium:permissions": ["sidePanel", "tabs"],
+  "firefox:permissions": ["tabs"],
   "background": {
     "chromium:service_worker": "background.js",
     "firefox:scripts": ["background.js"]

package/templates/javascript/src/sidebar/SidebarApp.js

@@ -1,5 +1,8 @@
 import './styles.css'
 import javascriptLogo from '../images/icon.png'
+import {watchPageTitle} from './page-title.js'
+
+const NO_PAGE_TEXT = 'Open a web page to see its title here.'
 
 function SidebarApp() {
   const root = document.getElementById('root')
@@ -27,8 +30,16 @@ function SidebarApp() {
   description.className = 'sidebar_description'
   description.append('Learn more in the ', link, ' .')
 
-  app.append(logo, title, description)
+  const pageTitle = document.createElement('p')
+  pageTitle.className = 'sidebar_page_title'
+  pageTitle.textContent = NO_PAGE_TEXT
+
+  app.append(logo, title, description, pageTitle)
   root.replaceChildren(app)
+
+  watchPageTitle((answer) => {
+    pageTitle.textContent = answer ? answer.title : NO_PAGE_TEXT
+  })
 }
 
 SidebarApp()

package/templates/javascript/src/sidebar/page-title.js

@@ -0,0 +1,71 @@
+// The panel's question to the page. The content script answers it with the
+// page title and url, so the panel never reads the page on its own.
+export const PAGE_TITLE_REQUEST = 'getPageTitle'
+
+function isWebPage(tab) {
+  return typeof tab.url === 'string' && /^https?:/.test(tab.url)
+}
+
+// The page the panel is about. When the panel itself is open as a tab (Safari,
+// or a test harness) the active tab is the panel, so the most recently used
+// web tab stands in for it.
+function findPageTab(callback) {
+  chrome.tabs.query({active: true, lastFocusedWindow: true}, (focused) => {
+    const current = focused?.[0]
+
+    if (current && isWebPage(current)) {
+      callback(current)
+
+      return
+    }
+
+    chrome.tabs.query({}, (tabs) => {
+      const webTabs = (tabs ?? []).filter(isWebPage)
+      webTabs.sort(
+        (a, b) =>
+          Number(b.active) - Number(a.active) ||
+          (b.lastAccessed ?? 0) - (a.lastAccessed ?? 0)
+      )
+
+      callback(webTabs[0])
+    })
+  })
+}
+
+function askPage(tab, onAnswer) {
+  chrome.tabs.sendMessage(tab.id, {type: PAGE_TITLE_REQUEST}, (answer) => {
+    // A page with no content script in it (a browser page, or one loaded
+    // before the extension was) has nobody to answer, so the hint stays up.
+    onAnswer(chrome.runtime.lastError ? undefined : answer)
+  })
+}
+
+// Keeps onChange fed with the current page's title, asking again whenever the
+// active tab changes or a page finishes loading. Returns the function that
+// stops watching.
+export function watchPageTitle(onChange) {
+  const refresh = () => {
+    findPageTab((tab) => {
+      if (!tab) {
+        onChange(undefined)
+
+        return
+      }
+
+      askPage(tab, onChange)
+    })
+  }
+
+  const onUpdated = (_tabId, changeInfo) => {
+    if (changeInfo.status === 'complete' || changeInfo.title) refresh()
+  }
+
+  chrome.tabs.onActivated.addListener(refresh)
+  chrome.tabs.onUpdated.addListener(onUpdated)
+  refresh()
+
+  return () => {
+    chrome.tabs.onActivated.removeListener(refresh)
+    chrome.tabs.onUpdated.removeListener(onUpdated)
+  }
+}

package/templates/javascript/src/sidebar/styles.css

@@ -61,3 +61,12 @@ body {
   color: var(--sidebar-link);
   margin: 0;
 }
+
+.sidebar_page_title {
+  font-size: small;
+  margin: 1rem 0 0;
+  padding-top: 0.75rem;
+  border-top: 1px solid var(--sidebar-border);
+  text-align: center;
+  word-break: break-word;
+}