Merge branch 'main' into main

.changeset/chatty-teachers-compare.md

@@ -0,0 +1,5 @@
+---
+"@crxjs/vite-plugin": patch
+---
+
+Proxy Cache-Control header

.changeset/pre.json

@@ -33,6 +33,7 @@
     "six-cobras-flash",
     "sixty-mirrors-promise",
     "small-phones-beam",
+    "smart-bottles-warn",
     "strong-jobs-try",
     "stupid-years-whisper",
     "swift-years-kick",

.changeset/smart-bottles-warn.md

@@ -0,0 +1,5 @@
+---
+'@crxjs/vite-plugin': major
+---
+
+fix: workaround for the issue with chrome.runtime.getURL introduced in Chrome 130 causing CSP rejecting script due to different origin (GUID instead of chrome extension id)

.changeset/witty-rats-attack.md

@@ -0,0 +1,6 @@
+---
+"@crxjs/vite-plugin": patch
+---
+
+build(deps): bump rollup from 2.78.1 to 2.79.2 in /packages/vite-plugin
+build(deps): bump vite from 3.1.7 to 3.2.11 in /packages/vite-plugin

.github/workflows/release.yml

@@ -27,7 +27,7 @@ jobs:
         uses: pnpm/action-setup@v4
         with:
           # Version of PNPM to install
-          version: 6.3.0
+          version: 8.9.0
           # Where to store PNPM files
           # dest: # optional, default is ~/setup-pnpm
           # If specified, run `pnpm install`

.github/workflows/vite-plugin.yml

@@ -45,7 +45,7 @@ jobs:
         uses: pnpm/action-setup@v4
         with:
           # Version of PNPM to install
-          version: 7.9.5
+          version: 8.9.0
           # Where to store PNPM files
           # dest: # optional, default is ~/setup-pnpm
           # If specified, run `pnpm install`
@@ -91,7 +91,7 @@ jobs:
         uses: pnpm/action-setup@v4
         with:
           # Version of PNPM to install
-          version: 7.9.5
+          version: 8.9.0
           # Where to store PNPM files
           # dest: # optional, default is ~/setup-pnpm
           # If specified, run `pnpm install`
@@ -146,7 +146,7 @@ jobs:
         uses: pnpm/action-setup@v4
         with:
           # Version of PNPM to install
-          version: 7.9.5
+          version: 8.9.0
           # Where to store PNPM files
           # dest: # optional, default is ~/setup-pnpm
           # If specified, run `pnpm install`

packages/vite-plugin-docs/docs/common/ImageCodeBlock.js

@@ -0,0 +1,116 @@
+import React from 'react';
+import CodeBlock from '@theme/CodeBlock';
+
+// Helper function to dedent the code
+const dedent = (str) => {
+  const lines = str.split('\n');
+  const minIndent = Math.min(
+    ...lines.filter(line => line.trim()).map(line => line.match(/^ */)[0].length)
+  );
+  return lines.map(line => line.slice(minIndent)).join('\n').trim();
+};
+
+const reactCodeBlock = () => {
+  return (
+    <div>
+      <CodeBlock
+        language='jsx'
+        title='App.jsx'>
+        {dedent(`
+          <img
+            // highlight-next-line
+            src={chrome.runtime.getURL('icons/logo.png')}
+            className='App-logo'
+            alt='logo'
+          />
+        `)}
+      </CodeBlock>
+    </div>
+  )
+};
+
+const solidCodeBlock = () => {
+  return (
+    <div>
+      <CodeBlock
+        language='jsx'
+        title='App.jsx'>
+        {dedent(`
+          <img
+            // highlight-next-line
+            src={chrome.runtime.getURL('icons/logo.png')}
+            className='App-logo'
+            alt='logo'
+          />
+        `)}
+      </CodeBlock>
+    </div>
+  )
+}
+
+const vanillaCodeBlock = () => {
+  return (
+    <div>
+      <CodeBlock
+        language='jsx'
+        title='App.jsx'>
+        {dedent(`
+          <img
+            // highlight-next-line
+            src={chrome.runtime.getURL('icons/logo.png')}
+            className='App-logo'
+            alt='logo'
+          />
+        `)}
+      </CodeBlock>
+    </div>
+  )
+}
+
+const vueCodeBlock = () => {
+  return (
+    <div>
+      <CodeBlock
+        language='jsx'
+        title='App.vue'>
+        {dedent(`
+          <script setup>
+            import logo from './assets/image.png';
+            // highlight-next-line
+            const logoUrl = chrome.runtime.getURL(logo);
+          </script>
+
+          <template>
+            <img :src="logoUrl" className='App-logo' alt='logo' />
+          </template>
+        `)}
+      </CodeBlock>
+    </div>
+  )
+}
+
+const factory = (framework) => {
+  switch (framework) {
+    case 'react':
+      return reactCodeBlock();
+    case 'solid':
+      return solidCodeBlock();
+    case 'vanilla':
+      return vanillaCodeBlock();
+    case 'vue':
+      return vueCodeBlock();
+    default:
+      return "No code block available";
+  }
+};
+
+const ImageCodeBlock = ({ framework }) => {
+  const codeBlock = factory(framework);
+  return (
+    <div>
+      {codeBlock}
+    </div>
+  );
+};
+
+export { ImageCodeBlock };

packages/vite-plugin-docs/docs/common/_get-url-for-images.mdx

@@ -0,0 +1,31 @@
+import { ImageCodeBlock } from './ImageCodeBlock';
+
+## Get the right URL
+
+:::info
+
+<!-- Add link to Chrome Dev Docs -->
+
+Content scripts share the origin of the page where they run.
+
+:::
+
+The browser treats the imported value `logo` as a URL from the host page. If the
+content script is running on `https://google.com`, the `img` tag will
+try to load from `https://google.com/logo.svg`.
+
+Images first must be specified in the `web_accessible_resources` field in your `manifest.json` file:
+
+
+```json title="manifest.json"
+"web_accessible_resources": [
+  {
+    "resources": [ "icons/*.png"],
+    "matches": []
+  }
+]
+```
+
+Then you reference the image in your content script using the [chrome.runtime.getURL](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/getURL) method:
+
+<ImageCodeBlock framework={props.framework} />

packages/vite-plugin-docs/docs/getting-started/_create-project-tabs.mdx

@@ -1,57 +1,26 @@
-import Tabs from '@theme/Tabs'
-import TabItem from '@theme/TabItem'
-
-## Create a project
-
-Use your favorite package manager to scaffold a new project and follow the
-prompts to create a vanilla JS project.
-
-<Tabs groupId='vite-version'>
-  <TabItem value='vite2' label='Vite 2' default>
-
-```sh
-npm init vite@^2.9.4
-```
-
-  </TabItem>
-  <TabItem value='vite3' label='Vite 3 (beta)'>
-
-```sh
-npm init vite@latest
-```
-
-:::info beta
-
-CRXJS support for Vite 3 is in beta.
-
-:::
-
-:::info react users
-
-HMR in CRXJS is incompatible with `@vite/plugin-react-swc`. We recommend using @vitejs/plugin-react instead.
-
-:::
-
-  </TabItem>
-</Tabs>
-
-## Install CRXJS Vite plugin
-
-Now install the CRXJS Vite plugin using your favorite package manager.
-
-<Tabs groupId='vite-version'>
-  <TabItem value='vite2' label='Vite 2' default>
-
-```sh
-npm i @crxjs/vite-plugin@latest -D
-```
-
-  </TabItem>
-  <TabItem value='vite3' label='Vite 3 (beta)'>
-
-```sh
-npm i @crxjs/vite-plugin@beta -D
-```
-
-  </TabItem>
-</Tabs>
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import Admonition from '@theme/Admonition';
+
+export  const CreateProjectTabs = ({ projectType }) => 
+    <>
+      <p>Use your favorite package manager to scaffold a new project and follow the prompts to create a {projectType} project.</p>
+      <Tabs groupId='vite-version'>
+        <TabItem value='vite2' label='Vite 2' default>
+          <pre>
+            <code>npm init vite@^2.9.4</code>
+          </pre>
+        </TabItem>
+        <TabItem value='vite3' label='Vite 3 (beta)'>
+          <pre>
+            <code>npm init vite@latest</code>
+          </pre>
+          <Admonition type="info" title="beta">
+            CRXJS support for Vite 3 is in beta.
+          </Admonition>
+          <Admonition type="info" title="React Users">
+            HMR in CRXJS is incompatible with <code>@vite/plugin-react-swc</code>. We recommend using <code>@vitejs/plugin-react</code> instead.
+          </Admonition>
+        </TabItem>
+      </Tabs>
+    </>

packages/vite-plugin-docs/docs/getting-started/react/00-create-project.md

@@ -10,15 +10,15 @@ pagination_prev: null
 slug: create-project
 ---
 
-import CreateProjectTabs from '../\_create-project-tabs.mdx'
+import {CreateProjectTabs} from '../\_create-project-tabs.mdx'
 
 # Get Started with React
 
 This quick guide will get you up and running with a Chrome Extension popup page.
 You'll see how to integrate CRXJS with Vite, then explore Vite HMR in an
 extension React HTML page. The first two sections take about 90 seconds!
 
-<CreateProjectTabs />
+<CreateProjectTabs projectType="react"/>
 
 ## Update the Vite config
 

packages/vite-plugin-docs/docs/getting-started/react/02-add-content-script.md

@@ -128,40 +128,9 @@ ReactDOM.createRoot(root).render(
 );
 ```
 
-## Get the right URL
+import GetUrlForImages from '@site/docs/common/\_get-url-for-images.mdx'
 
-:::info
-
-<!-- Add link to Chrome Dev Docs -->
-
-Content scripts share the origin of the page where they run.
-
-:::
-
-The browser treats the imported value `logo` as a URL from the host page. If the
-content script is running on `https://google.com`, the following `img` tag will
-try to load from `https://google.com/logo.svg`.
-
-```jsx title=src/App.jsx
-<img
-  // highlight-next-line
-  src={logo}
-  className='App-logo'
-  alt='logo'
-/>
-```
-
-We need to get a URL with our extension id for static assets like images. Use
-the `getURL()` method to get the extension url for our logo:
-
-```jsx title=src/App.jsx
-<img
-  // highlight-next-line
-  src={chrome.runtime.getURL(logo)}
-  className='App-logo'
-  alt='logo'
-/>
-```
+<GetUrlForImages framework="react"/>
 
 Now our content script is ready for action! Let's try it out in the next
 section.