extension-develop 2.0.0-beta.6 → 2.0.0-beta.7

package/dist/extensions/webkit-based-manager-extension/pages/sakura.css

@@ -0,0 +1,267 @@
+/* Sakura.css v1.5.0
+ * ================
+ * Minimal css theme.
+ * Project: https://github.com/oxalorg/sakura/
+ */
+/* Body */
+html {
+  font-size: 62.5%;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
+}
+
+body {
+  font-size: 1.8rem;
+  line-height: 1.618;
+  max-width: 38em;
+  margin: auto;
+  color: #4a4a4a;
+  background-color: #f9f9f9;
+  padding: 13px;
+}
+
+@media (max-width: 684px) {
+  body {
+    font-size: 1.53rem;
+  }
+}
+@media (max-width: 382px) {
+  body {
+    font-size: 1.35rem;
+  }
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  line-height: 1.1;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
+  font-weight: 700;
+  margin-top: 3rem;
+  margin-bottom: 1.5rem;
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  -ms-word-break: break-all;
+  word-break: break-word;
+}
+
+h1 {
+  font-size: 2.35em;
+}
+
+h2 {
+  font-size: 2em;
+}
+
+h3 {
+  font-size: 1.75em;
+}
+
+h4 {
+  font-size: 1.5em;
+}
+
+h5 {
+  font-size: 1.25em;
+}
+
+h6 {
+  font-size: 1em;
+}
+
+p {
+  margin-top: 0px;
+  margin-bottom: 2.5rem;
+}
+
+small,
+sub,
+sup {
+  font-size: 75%;
+}
+
+hr {
+  border-color: #1d7484;
+}
+
+a {
+  text-decoration: none;
+  color: #1d7484;
+}
+a:visited {
+  color: #144f5a;
+}
+a:hover {
+  color: #982c61;
+  border-bottom: 2px solid #4a4a4a;
+}
+
+ul {
+  padding-left: 1.4em;
+  margin-top: 0px;
+  margin-bottom: 2.5rem;
+}
+
+li {
+  margin-bottom: 0.4em;
+}
+
+blockquote {
+  margin-left: 0px;
+  margin-right: 0px;
+  padding-left: 1em;
+  padding-top: 0.8em;
+  padding-bottom: 0.8em;
+  padding-right: 0.8em;
+  border-left: 5px solid #1d7484;
+  margin-bottom: 2.5rem;
+  background-color: #f1f1f1;
+}
+
+blockquote p {
+  margin-bottom: 0;
+}
+
+img,
+video {
+  height: auto;
+  max-width: 100%;
+  margin-top: 0px;
+  margin-bottom: 2.5rem;
+}
+
+/* Pre and Code */
+pre {
+  background-color: #f1f1f1;
+  display: block;
+  padding: 1em;
+  overflow-x: auto;
+  margin-top: 0px;
+  margin-bottom: 2.5rem;
+  font-size: 0.9em;
+}
+
+code,
+kbd,
+samp {
+  font-size: 0.9em;
+  padding: 0 0.5em;
+  background-color: #f1f1f1;
+  white-space: pre-wrap;
+}
+
+pre > code {
+  padding: 0;
+  background-color: transparent;
+  white-space: pre;
+  font-size: 1em;
+}
+
+/* Tables */
+table {
+  text-align: justify;
+  width: 100%;
+  border-collapse: collapse;
+  margin-bottom: 2rem;
+}
+
+td,
+th {
+  padding: 0.5em;
+  border-bottom: 1px solid #f1f1f1;
+}
+
+/* Buttons, forms and input */
+input,
+textarea {
+  border: 1px solid #4a4a4a;
+}
+input:focus,
+textarea:focus {
+  border: 1px solid #1d7484;
+}
+
+textarea {
+  width: 100%;
+}
+
+.button,
+button,
+input[type='submit'],
+input[type='reset'],
+input[type='button'],
+input[type='file']::file-selector-button {
+  display: inline-block;
+  padding: 5px 10px;
+  text-align: center;
+  text-decoration: none;
+  white-space: nowrap;
+  background-color: #1d7484;
+  color: #f9f9f9;
+  border-radius: 1px;
+  border: 1px solid #1d7484;
+  cursor: pointer;
+  box-sizing: border-box;
+}
+.button[disabled],
+button[disabled],
+input[type='submit'][disabled],
+input[type='reset'][disabled],
+input[type='button'][disabled],
+input[type='file']::file-selector-button[disabled] {
+  cursor: default;
+  opacity: 0.5;
+}
+.button:hover,
+button:hover,
+input[type='submit']:hover,
+input[type='reset']:hover,
+input[type='button']:hover,
+input[type='file']::file-selector-button:hover {
+  background-color: #982c61;
+  color: #f9f9f9;
+  outline: 0;
+}
+.button:focus-visible,
+button:focus-visible,
+input[type='submit']:focus-visible,
+input[type='reset']:focus-visible,
+input[type='button']:focus-visible,
+input[type='file']::file-selector-button:focus-visible {
+  outline-style: solid;
+  outline-width: 2px;
+}
+
+textarea,
+select,
+input {
+  color: #4a4a4a;
+  padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
+  margin-bottom: 10px;
+  background-color: #f1f1f1;
+  border: 1px solid #f1f1f1;
+  border-radius: 4px;
+  box-shadow: none;
+  box-sizing: border-box;
+}
+textarea:focus,
+select:focus,
+input:focus {
+  border: 1px solid #1d7484;
+  outline: 0;
+}
+
+input[type='checkbox']:focus {
+  outline: 1px dotted #1d7484;
+}
+
+label,
+legend,
+fieldset {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-weight: 600;
+}

package/dist/extensions/webkit-based-manager-extension/pages/welcome.html

@@ -0,0 +1,49 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <title>Welcome!</title>
+    <meta charset="UTF-8" />
+    <link
+      rel="icon"
+      href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🧩</text></svg>"
+    />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./sakura.css" media="screen" />
+    <link
+      rel="stylesheet"
+      href="./sakura-dark.css"
+      media="screen and (prefers-color-scheme: dark)"
+    />
+    <style>
+      .center-middle {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        height: 100vh;
+        padding: 0;
+        margin: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="center-middle">
+      <h1 style="font-size: 4.2em">
+        WebKit-based Extension<br />
+        <a href="#"><span id="extensionName"></span></a><br />
+        ready.
+      </h1>
+      <p id="extensionDescription"></p>
+      <p>
+        <a target="_blank" href="https://github.com/cezaraugusto/extension"
+          >🧩 Extension.js</a
+        >
+        is a development tool for browser extensions with built-in support for
+        TypeScript, WebAssembly, React, and modern JavaScript.
+      </p>
+      <button id="learnMore">
+        🧩 Learn more about developing cross-browser extensions
+      </button>
+    </div>
+    <script src="welcome.js"></script>
+  </body>
+</html>

package/dist/extensions/webkit-based-manager-extension/pages/welcome.js

@@ -0,0 +1,34 @@
+async function getUserExtension() {
+  const allExtensions = await chrome.management.getAll()
+
+  return allExtensions.filter((extension) => {
+    return (
+      // Do not include itself
+      extension.id !== chrome.runtime.id &&
+      // Reload extension
+      extension.id !== 'igcijhgmihmjbbahdabahfbpffalcfnn' &&
+      // Show only unpackaged extensions
+      extension.installType === 'development'
+    )
+  })
+}
+
+async function onStartup() {
+  const userExtension = await getUserExtension()
+  const extensionName = document.getElementById('extensionName')
+  const extensionDescription = document.getElementById('extensionDescription')
+
+  extensionName.innerText = userExtension[0].name
+  extensionName.title = `• Name: ${userExtension[0].name}
+• ID: ${userExtension[0].id}
+• Version: ${userExtension[0].version}`
+
+  extensionDescription.innerText = userExtension[0].description
+
+  const learnMore = document.getElementById('learnMore')
+  learnMore.addEventListener('click', () => {
+    chrome.tabs.create({url: 'https://extension.js.org/'})
+  })
+}
+
+onStartup()

package/dist/extensions/webkit-based-manager-extension/reload-service.js

@@ -0,0 +1,145 @@
+const TEN_SECONDS_MS = 10 * 1000
+let webSocket = null
+
+export async function connect() {
+  if (webSocket) {
+    // If already connected, do nothing
+    return
+  }
+
+  webSocket = new WebSocket('ws://localhost:__RELOAD_PORT__')
+
+  webSocket.onerror = (event) => {
+    console.error(`[Reload Service] Connection error: ${JSON.stringify(event)}`)
+    webSocket.close()
+  }
+
+  webSocket.onopen = () => {
+    console.info(`[Reload Service] Connection opened.`)
+  }
+
+  webSocket.onmessage = async (event) => {
+    const message = JSON.parse(event.data)
+
+    if (message.status === 'serverReady') {
+      console.info('[Reload Service] Connection ready.')
+      await requestInitialLoadData()
+    }
+
+    if (message.changedFile) {
+      console.info(
+        `[Reload Service] Changes detected on ${message.changedFile}. Reloading extension...`
+      )
+
+      await messageAllExtensions(message.changedFile)
+    }
+  }
+
+  webSocket.onclose = () => {
+    console.info('[Reload Service] Connection closed.')
+    webSocket = null
+  }
+}
+
+export function disconnect() {
+  if (webSocket) {
+    webSocket.close()
+  }
+}
+
+async function getDevExtensions() {
+  const allExtensions = await new Promise((resolve) => {
+    chrome.management.getAll(resolve)
+  })
+
+  return allExtensions.filter((extension) => {
+    return (
+      // Do not include itself
+      extension.id !== chrome.runtime.id &&
+      // Manager extension
+      extension.id !== 'hkklidinfhnfidkjiknmmbmcloigimco' &&
+      // Show only unpackaged extensions
+      extension.installType === 'development'
+    )
+  })
+}
+
+async function messageAllExtensions(changedFile) {
+  // Check if the external extension is ready
+  const isExtensionReady = await checkExtensionReadiness()
+
+  if (isExtensionReady) {
+    const devExtensions = await getDevExtensions()
+    const reloadAll = devExtensions.map((extension) => {
+      chrome.runtime.sendMessage(extension.id, {changedFile}, (response) => {
+        if (response) {
+          console.info('[Reload Service] Extension reloaded and ready.')
+        }
+      })
+
+      return true
+    })
+
+    await Promise.all(reloadAll)
+  } else {
+    console.info('[Reload Service] External extension is not ready.')
+  }
+}
+
+async function requestInitialLoadData() {
+  const devExtensions = await getDevExtensions()
+
+  const messagePromises = devExtensions.map(async (extension) => {
+    return await new Promise((resolve) => {
+      chrome.runtime.sendMessage(
+        extension.id,
+        {initialLoadData: true},
+        (response) => {
+          if (chrome.runtime.lastError) {
+            console.error(
+              `Error sending message to ${extension.id}: ${chrome.runtime.lastError.message}`
+            )
+            resolve(null)
+          } else {
+            resolve(response)
+          }
+        }
+      )
+    })
+  })
+
+  const responses = await Promise.all(messagePromises)
+
+  // We received the info from the use extension.
+  // All good, client is ready. Inform the server.
+  if (webSocket && webSocket.readyState === WebSocket.OPEN) {
+    const message = JSON.stringify({
+      status: 'clientReady',
+      data: responses[0]
+    })
+
+    webSocket.send(message)
+  }
+}
+
+async function checkExtensionReadiness() {
+  // Delay for 1 second
+  await delay(1000)
+  // Assume the extension is ready
+  return true
+}
+
+async function delay(ms) {
+  return await new Promise((resolve) => setTimeout(resolve, ms))
+}
+
+export function keepAlive() {
+  const keepAliveIntervalId = setInterval(() => {
+    if (webSocket) {
+      webSocket.send(JSON.stringify({status: 'ping'}))
+      console.info('[Reload Service] Listening for changes...')
+    } else {
+      clearInterval(keepAliveIntervalId)
+    }
+  }, TEN_SECONDS_MS)
+}