Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Update all templates
Browse files Browse the repository at this point in the history
cezaraugusto committed Nov 22, 2024
1 parent a274ab9 commit df0a236
Showing 32 changed files with 407 additions and 171 deletions.
20 changes: 8 additions & 12 deletions examples/content-css-modules/content/scripts.js
Original file line number Diff line number Diff line change
@@ -9,25 +9,21 @@ setTimeout(initial, 1000)
function initial() {
const rootDiv = document.createElement('div')
rootDiv.id = 'extension-root'
document.body.appendChild(rootDiv)

// Injecting content_scripts inside a shadow dom
// prevents conflicts with the host page's styles.
// This way, styles from the extension won't leak into the host page.
const shadowRoot = rootDiv.attachShadow({mode: 'open'})

// Tell Extension.js to use the shadow root as the root element
// to inject styles into.
// @ts-exspect-error - Ignore TS error for global variable
window.__EXTENSION_SHADOW_ROOT__ = shadowRoot

document.body.appendChild(rootDiv)

const shadowDomContainer = document.createElement('div')
shadowDomContainer.id = 'extension-shadow-dom-container'

shadowRoot.appendChild(shadowDomContainer)
if (process.env.EXTENSION_MODE === 'development') {
// @ts-expect-error - Tell Extension.js
// to use the shadow root as the root element
// to inject styles into.
window.__EXTENSION_SHADOW_ROOT__ = shadowRoot
}

shadowDomContainer.innerHTML = `
shadowRoot.innerHTML = `
<div class="content_script">
<img class=${styles.content_logo} src="${logo}" />
<h1 class="content_title">
3 changes: 3 additions & 0 deletions examples/content-css-modules/content/styles.css
Original file line number Diff line number Diff line change
@@ -20,14 +20,17 @@
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
font-weight: 700;
margin: 0;
}

.content_description {
font-size: small;
margin: 0;
}

.content_description a {
text-decoration: none;
border-bottom: 2px solid #c9c9c9;
color: #e5e7eb;
margin: 0;
}
20 changes: 8 additions & 12 deletions examples/content-env/content/scripts.ts
Original file line number Diff line number Diff line change
@@ -11,25 +11,21 @@ setTimeout(initial, 1000)
function initial() {
const rootDiv = document.createElement('div')
rootDiv.id = 'extension-root'
document.body.appendChild(rootDiv)

// Injecting content_scripts inside a shadow dom
// prevents conflicts with the host page's styles.
// This way, styles from the extension won't leak into the host page.
const shadowRoot = rootDiv.attachShadow({mode: 'open'})

// Tell Extension.js to use the shadow root as the root element
// to inject styles into.
// @ts-exspect-error - Ignore TS error for global variable
window.__EXTENSION_SHADOW_ROOT__ = shadowRoot

document.body.appendChild(rootDiv)

const shadowDomContainer = document.createElement('div')
shadowDomContainer.id = 'extension-shadow-dom-container'

shadowRoot.appendChild(shadowDomContainer)
if (process.env.EXTENSION_MODE === 'development') {
// @ts-expect-error - Tell Extension.js
// to use the shadow root as the root element
// to inject styles into.
window.__EXTENSION_SHADOW_ROOT__ = shadowRoot
}

shadowDomContainer.innerHTML = `
shadowRoot.innerHTML = `
<div class="content_script">
<img class="content_logo" src="${logo}" />
<p class="content_description">${process.env.EXTENSION_PUBLIC_DESCRIPTION_TEXT}</p>
3 changes: 3 additions & 0 deletions examples/content-env/content/styles.css
Original file line number Diff line number Diff line change
@@ -24,14 +24,17 @@
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
font-weight: 700;
margin: 0;
}

.content_description {
font-size: small;
margin: 0;
}

.content_description a {
text-decoration: none;
border-bottom: 2px solid #c9c9c9;
color: #e5e7eb;
margin: 0;
}
20 changes: 8 additions & 12 deletions examples/content-esm/content/scripts.mjs
Original file line number Diff line number Diff line change
@@ -8,23 +8,19 @@ setTimeout(initial, 1000)
function initial() {
const rootDiv = document.createElement('div')
rootDiv.id = 'extension-root'
document.body.appendChild(rootDiv)

// Injecting content_scripts inside a shadow dom
// prevents conflicts with the host page's styles.
// This way, styles from the extension won't leak into the host page.
const shadowRoot = rootDiv.attachShadow({mode: 'open'})

// Tell Extension.js to use the shadow root as the root element
// to inject styles into.
// @ts-exspect-error - Ignore TS error for global variable
window.__EXTENSION_SHADOW_ROOT__ = shadowRoot

document.body.appendChild(rootDiv)

const shadowDomContainer = document.createElement('div')
shadowDomContainer.id = 'extension-shadow-dom-container'

shadowRoot.appendChild(shadowDomContainer)
if (process.env.EXTENSION_MODE === 'development') {
// @ts-expect-error - Tell Extension.js
// to use the shadow root as the root element
// to inject styles into.
window.__EXTENSION_SHADOW_ROOT__ = shadowRoot
}

shadowDomContainer.innerHTML = contentComponent
shadowRoot.innerHTML = contentComponent
}
3 changes: 3 additions & 0 deletions examples/content-esm/content/styles.css
Original file line number Diff line number Diff line change
@@ -24,14 +24,17 @@
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
font-weight: 700;
margin: 0;
}

.content_description {
font-size: small;
margin: 0;
}

.content_description a {
text-decoration: none;
border-bottom: 2px solid #c9c9c9;
color: #e5e7eb;
margin: 0;
}
22 changes: 18 additions & 4 deletions examples/content-extension-config/content/scripts.tsx
Original file line number Diff line number Diff line change
@@ -10,8 +10,22 @@ function initial() {
rootDiv.id = 'extension-root'
document.body.appendChild(rootDiv)

// Use `createRoot` to create a root, then render the <App /> component
// Note that `createRoot` takes the container DOM node, not the React element
const root = ReactDOM.createRoot(rootDiv)
root.render(<ContentApp />)
// Injecting content_scripts inside a shadow dom
// prevents conflicts with the host page's styles.
// This way, styles from the extension won't leak into the host page.
const shadowRoot = rootDiv.attachShadow({mode: 'open'})

if (process.env.EXTENSION_MODE === 'development') {
// @ts-expect-error - Tell Extension.js
// to use the shadow root as the root element
// to inject styles into.
window.__EXTENSION_SHADOW_ROOT__ = shadowRoot
}

const root = ReactDOM.createRoot(shadowRoot)
root.render(
<div className="content_script">
<ContentApp />
</div>
)
}
2 changes: 1 addition & 1 deletion examples/content-extension-config/content/styles.css
Original file line number Diff line number Diff line change
@@ -2,7 +2,7 @@
@tailwind components;
@tailwind utilities;

#extension-root {
.content_script {
position: fixed;
bottom: 0;
right: 0;
54 changes: 37 additions & 17 deletions examples/content-less-modules/content/scripts.js
Original file line number Diff line number Diff line change
@@ -4,20 +4,40 @@ import logo from '../images/logo.svg'

console.log('hello from content_scripts')

document.body.innerHTML += `
<div class="content_script">
<img class="${styles.logo}" src="${logo}" />
<h1 class="content_title">
Welcome to your LESS Modules Extension
</h1>
<p class="content_description">
Learn more about creating cross-browser extensions at <a
className="underline hover:no-underline"
href="https://extension.js.org"
target="_blank"
>
https://extension.js.org
</a>
</p>
</div>
`
setTimeout(initial, 1000)

function initial() {
const rootDiv = document.createElement('div')
rootDiv.id = 'extension-root'
document.body.appendChild(rootDiv)

// Injecting content_scripts inside a shadow dom
// prevents conflicts with the host page's styles.
// This way, styles from the extension won't leak into the host page.
const shadowRoot = rootDiv.attachShadow({mode: 'open'})

if (process.env.EXTENSION_MODE === 'development') {
// @ts-expect-error - Tell Extension.js
// to use the shadow root as the root element
// to inject styles into.
window.__EXTENSION_SHADOW_ROOT__ = shadowRoot
}

shadowRoot.innerHTML = `
<div class="content_script">
<img class="${styles.logo}" src="${logo}" />
<h1 class="content_title">
Welcome to your LESS Modules Extension
</h1>
<p class="content_description">
Learn more about creating cross-browser extensions at <a
className="underline hover:no-underline"
href="https://extension.js.org"
target="_blank"
>
https://extension.js.org
</a>
</p>
</div>
`
}
3 changes: 3 additions & 0 deletions examples/content-less-modules/content/styles.less
Original file line number Diff line number Diff line change
@@ -24,14 +24,17 @@
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
font-weight: 700;
margin: 0;
}

.content_description {
font-size: small;
margin: 0;
}

.content_description a {
text-decoration: none;
border-bottom: 2px solid #c9c9c9;
color: #e5e7eb;
margin: 0;
}
54 changes: 37 additions & 17 deletions examples/content-less/content/scripts.js
Original file line number Diff line number Diff line change
@@ -3,20 +3,40 @@ import logo from '../images/logo.svg'

console.log('hello from content_scripts')

document.body.innerHTML += `
<div class="content_script">
<img class="content_logo" src="${logo}" />
<h1 class="content_title">
Welcome to your LESS Extension
</h1>
<p class="content_description">
Learn more about creating cross-browser extensions at <a
className="underline hover:no-underline"
href="https://extension.js.org"
target="_blank"
>
https://extension.js.org
</a>
</p>
</div>
`
setTimeout(initial, 1000)

function initial() {
const rootDiv = document.createElement('div')
rootDiv.id = 'extension-root'
document.body.appendChild(rootDiv)

// Injecting content_scripts inside a shadow dom
// prevents conflicts with the host page's styles.
// This way, styles from the extension won't leak into the host page.
const shadowRoot = rootDiv.attachShadow({mode: 'open'})

if (process.env.EXTENSION_MODE === 'development') {
// @ts-expect-error - Tell Extension.js
// to use the shadow root as the root element
// to inject styles into.
window.__EXTENSION_SHADOW_ROOT__ = shadowRoot
}

shadowRoot.innerHTML = `
<div class="content_script">
<img class="content_logo" src="${logo}" />
<h1 class="content_title">
Welcome to your LESS Extension
</h1>
<p class="content_description">
Learn more about creating cross-browser extensions at <a
className="underline hover:no-underline"
href="https://extension.js.org"
target="_blank"
>
https://extension.js.org
</a>
</p>
</div>
`
}
3 changes: 3 additions & 0 deletions examples/content-less/content/styles.less
Original file line number Diff line number Diff line change
@@ -24,14 +24,17 @@
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
font-weight: 700;
margin: 0;
}

.content_description {
font-size: small;
margin: 0;
}

.content_description a {
text-decoration: none;
border-bottom: 2px solid #c9c9c9;
color: #e5e7eb;
margin: 0;
}
56 changes: 39 additions & 17 deletions examples/content-main-world/content/scripts.js
Original file line number Diff line number Diff line change
@@ -1,20 +1,42 @@
import './styles.css'
import logo from '../images/extension.svg'

document.body.innerHTML += `
<div class="content_script">
<img class="content_logo" src="${logo}" />
<h1 class="content_title">
Main World
</h1>
<p class="content_description">
Learn more about creating cross-browser extensions at <a
className="underline hover:no-underline"
href="https://extension.js.org"
target="_blank"
>
https://extension.js.org
</a>
</p>
</div>
`
console.log('hello from content_scripts')

setTimeout(initial, 1000)

function initial() {
const rootDiv = document.createElement('div')
rootDiv.id = 'extension-root'
document.body.appendChild(rootDiv)

// Injecting content_scripts inside a shadow dom
// prevents conflicts with the host page's styles.
// This way, styles from the extension won't leak into the host page.
const shadowRoot = rootDiv.attachShadow({mode: 'open'})

if (process.env.EXTENSION_MODE === 'development') {
// @ts-expect-error - Tell Extension.js
// to use the shadow root as the root element
// to inject styles into.
window.__EXTENSION_SHADOW_ROOT__ = shadowRoot
}

shadowRoot.innerHTML = `
<div class="content_script">
<img class="content_logo" src="${logo}" />
<h1 class="content_title">
Main World
</h1>
<p class="content_description">
Learn more about creating cross-browser extensions at <a
className="underline hover:no-underline"
href="https://extension.js.org"
target="_blank"
>
https://extension.js.org
</a>
</p>
</div>
`
}
3 changes: 3 additions & 0 deletions examples/content-main-world/content/styles.css
Original file line number Diff line number Diff line change
@@ -24,14 +24,17 @@
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
font-weight: 700;
margin: 0;
}

.content_description {
font-size: small;
margin: 0;
}

.content_description a {
text-decoration: none;
border-bottom: 2px solid #c9c9c9;
color: #e5e7eb;
margin: 0;
}
19 changes: 18 additions & 1 deletion examples/content-preact/content/scripts.tsx
Original file line number Diff line number Diff line change
@@ -10,5 +10,22 @@ function initial() {
rootDiv.id = 'extension-root'
document.body.appendChild(rootDiv)

render(<ContentApp />, rootDiv)
// Injecting content_scripts inside a shadow dom
// prevents conflicts with the host page's styles.
// This way, styles from the extension won't leak into the host page.
const shadowRoot = rootDiv.attachShadow({mode: 'open'})

if (process.env.EXTENSION_MODE === 'development') {
// @ts-expect-error - Tell Extension.js
// to use the shadow root as the root element
// to inject styles into.
window.__EXTENSION_SHADOW_ROOT__ = shadowRoot
}

render(
<div className="content_script">
<ContentApp />
</div>,
shadowRoot
)
}
2 changes: 1 addition & 1 deletion examples/content-preact/content/styles.css
Original file line number Diff line number Diff line change
@@ -2,7 +2,7 @@
@tailwind components;
@tailwind utilities;

#extension-root {
.content_script {
position: fixed;
bottom: 0;
right: 0;
22 changes: 18 additions & 4 deletions examples/content-react-svgr/content/scripts.tsx
Original file line number Diff line number Diff line change
@@ -10,8 +10,22 @@ function initial() {
rootDiv.id = 'extension-root'
document.body.appendChild(rootDiv)

// Use `createRoot` to create a root, then render the <App /> component
// Note that `createRoot` takes the container DOM node, not the React element
const root = ReactDOM.createRoot(rootDiv)
root.render(<ContentApp />)
// Injecting content_scripts inside a shadow dom
// prevents conflicts with the host page's styles.
// This way, styles from the extension won't leak into the host page.
const shadowRoot = rootDiv.attachShadow({mode: 'open'})

if (process.env.EXTENSION_MODE === 'development') {
// @ts-expect-error - Tell Extension.js
// to use the shadow root as the root element
// to inject styles into.
window.__EXTENSION_SHADOW_ROOT__ = shadowRoot
}

const root = ReactDOM.createRoot(shadowRoot)
root.render(
<div className="content_script">
<ContentApp />
</div>
)
}
2 changes: 1 addition & 1 deletion examples/content-react-svgr/content/styles.css
Original file line number Diff line number Diff line change
@@ -2,7 +2,7 @@
@tailwind components;
@tailwind utilities;

#extension-root {
.content_script {
position: fixed;
bottom: 0;
right: 0;
22 changes: 18 additions & 4 deletions examples/content-react/content/scripts.tsx
Original file line number Diff line number Diff line change
@@ -10,8 +10,22 @@ function initial() {
rootDiv.id = 'extension-root'
document.body.appendChild(rootDiv)

// Use `createRoot` to create a root, then render the <App /> component
// Note that `createRoot` takes the container DOM node, not the React element
const root = ReactDOM.createRoot(rootDiv)
root.render(<ContentApp />)
// Injecting content_scripts inside a shadow dom
// prevents conflicts with the host page's styles.
// This way, styles from the extension won't leak into the host page.
const shadowRoot = rootDiv.attachShadow({mode: 'open'})

if (process.env.EXTENSION_MODE === 'development') {
// @ts-expect-error - Tell Extension.js
// to use the shadow root as the root element
// to inject styles into.
window.__EXTENSION_SHADOW_ROOT__ = shadowRoot
}

const root = ReactDOM.createRoot(shadowRoot)
root.render(
<div className="content_script">
<ContentApp />
</div>
)
}
2 changes: 1 addition & 1 deletion examples/content-react/content/styles.css
Original file line number Diff line number Diff line change
@@ -2,7 +2,7 @@
@tailwind components;
@tailwind utilities;

#extension-root {
.content_script {
position: fixed;
bottom: 0;
right: 0;
54 changes: 37 additions & 17 deletions examples/content-sass-modules/content/scripts.js
Original file line number Diff line number Diff line change
@@ -4,20 +4,40 @@ import logo from '../images/logo.svg'

console.log('hello from content_scripts')

document.body.innerHTML += `
<div class="content_script">
<img class="${styles.logo}" src="${logo}" />
<h1 class="content_title">
Welcome to your Sass Modules Extension
</h1>
<p class="content_description">
Learn more about creating cross-browser extensions at <a
className="underline hover:no-underline"
href="https://extension.js.org"
target="_blank"
>
https://extension.js.org
</a>
</p>
</div>
`
setTimeout(initial, 1000)

function initial() {
const rootDiv = document.createElement('div')
rootDiv.id = 'extension-root'
document.body.appendChild(rootDiv)

// Injecting content_scripts inside a shadow dom
// prevents conflicts with the host page's styles.
// This way, styles from the extension won't leak into the host page.
const shadowRoot = rootDiv.attachShadow({mode: 'open'})

if (process.env.EXTENSION_MODE === 'development') {
// @ts-expect-error - Tell Extension.js
// to use the shadow root as the root element
// to inject styles into.
window.__EXTENSION_SHADOW_ROOT__ = shadowRoot
}

shadowRoot.innerHTML = `
<div class="content_script">
<img class="${styles.logo}" src="${logo}" />
<h1 class="content_title">
Welcome to your Sass Modules Extension
</h1>
<p class="content_description">
Learn more about creating cross-browser extensions at <a
className="underline hover:no-underline"
href="https://extension.js.org"
target="_blank"
>
https://extension.js.org
</a>
</p>
</div>
`
}
3 changes: 3 additions & 0 deletions examples/content-sass-modules/content/styles.scss
Original file line number Diff line number Diff line change
@@ -24,14 +24,17 @@
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
font-weight: 700;
margin: 0;
}

.content_description {
font-size: small;
margin: 0;
}

.content_description a {
text-decoration: none;
border-bottom: 2px solid #c9c9c9;
color: #e5e7eb;
margin: 0;
}
53 changes: 36 additions & 17 deletions examples/content-sass/content/scripts.js
Original file line number Diff line number Diff line change
@@ -3,21 +3,40 @@ import logo from '../images/logo.svg'

console.log('hello from content_scripts')

// Check if the content has already been added
document.body.innerHTML += `
<div class="content_script">
<img class="content_logo" src="${logo}" />
<h1 class="content_title">
Welcome to your Sass Extension
</h1>
<p class="content_description">
Learn more about creating cross-browser extensions at <a
className="underline hover:no-underline"
href="https://extension.js.org"
target="_blank"
>
https://extension.js.org
</a>
</p>
</div>
setTimeout(initial, 1000)

function initial() {
const rootDiv = document.createElement('div')
rootDiv.id = 'extension-root'
document.body.appendChild(rootDiv)

// Injecting content_scripts inside a shadow dom
// prevents conflicts with the host page's styles.
// This way, styles from the extension won't leak into the host page.
const shadowRoot = rootDiv.attachShadow({mode: 'open'})

if (process.env.EXTENSION_MODE === 'development') {
// @ts-expect-error - Tell Extension.js
// to use the shadow root as the root element
// to inject styles into.
window.__EXTENSION_SHADOW_ROOT__ = shadowRoot
}

shadowRoot.innerHTML = `
<div class="content_script">
<img class="content_logo" src="${logo}" />
<h1 class="content_title">
Welcome to your Sass Extension
</h1>
<p class="content_description">
Learn more about creating cross-browser extensions at <a
className="underline hover:no-underline"
href="https://extension.js.org"
target="_blank"
>
https://extension.js.org
</a>
</p>
</div>
`
}
3 changes: 3 additions & 0 deletions examples/content-sass/content/styles.scss
Original file line number Diff line number Diff line change
@@ -24,14 +24,17 @@
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
font-weight: 700;
margin: 0;
}

.content_description {
font-size: small;
margin: 0;
}

.content_description a {
text-decoration: none;
border-bottom: 2px solid #c9c9c9;
color: #e5e7eb;
margin: 0;
}
26 changes: 25 additions & 1 deletion examples/content-tailwind/content/scripts.js
Original file line number Diff line number Diff line change
@@ -3,4 +3,28 @@ import {getContentHtml} from './content'

console.log('hello from content_scripts')

document.body.innerHTML += `<div id="extension-root">${getContentHtml()}</div>`
setTimeout(initial, 1000)

function initial() {
const rootDiv = document.createElement('div')
rootDiv.id = 'extension-root'
document.body.appendChild(rootDiv)

// Injecting content_scripts inside a shadow dom
// prevents conflicts with the host page's styles.
// This way, styles from the extension won't leak into the host page.
const shadowRoot = rootDiv.attachShadow({mode: 'open'})

if (process.env.EXTENSION_MODE === 'development') {
// @ts-expect-error - Tell Extension.js
// to use the shadow root as the root element
// to inject styles into.
window.__EXTENSION_SHADOW_ROOT__ = shadowRoot
}

shadowRoot.innerHTML = `
<div class="content_script">
${getContentHtml()}
</div>
`
}
2 changes: 1 addition & 1 deletion examples/content-tailwind/content/styles.css
Original file line number Diff line number Diff line change
@@ -2,7 +2,7 @@
@tailwind components;
@tailwind utilities;

#extension-root {
.content_script {
position: fixed;
bottom: 0;
right: 0;
53 changes: 36 additions & 17 deletions examples/content-typescript/content/scripts.ts
Original file line number Diff line number Diff line change
@@ -3,20 +3,39 @@ import logo from '../images/logo.svg'

console.log('hello from content_scripts')

document.body.innerHTML += `
<div class="content_script">
<img class="content_logo" src="${logo}" />
<h1 class="content_title">
Welcome to your TypeScript Extension
</h1>
<p class="content_description">
Learn more about creating cross-browser extensions at <a
className="underline hover:no-underline"
href="https://extension.js.org"
target="_blank"
>
https://extension.js.org
</a>
</p>
</div>
`
setTimeout(initial, 1000)

function initial() {
const rootDiv = document.createElement('div')
rootDiv.id = 'extension-root'

// Injecting content_scripts inside a shadow dom
// prevents conflicts with the host page's styles.
// This way, styles from the extension won't leak into the host page.
const shadowRoot = rootDiv.attachShadow({mode: 'open'})

// Tell Extension.js to use the shadow root as the root element
// to inject styles into.
// @ts-exspect-error - Ignore TS error for global variable
window.__EXTENSION_SHADOW_ROOT__ = shadowRoot

document.body.appendChild(rootDiv)

shadowRoot.innerHTML = `
<div class="content_script">
<img class="content_logo" src="${logo}" />
<h1 class="content_title">
Welcome to your TypeScript Extension
</h1>
<p class="content_description">
Learn more about creating cross-browser extensions at <a
className="underline hover:no-underline"
href="https://extension.js.org"
target="_blank"
>
https://extension.js.org
</a>
</p>
</div>
`
}
3 changes: 3 additions & 0 deletions examples/content-typescript/content/styles.css
Original file line number Diff line number Diff line change
@@ -24,14 +24,17 @@
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
font-weight: 700;
margin: 0;
}

.content_description {
font-size: small;
margin: 0;
}

.content_description a {
text-decoration: none;
border-bottom: 2px solid #c9c9c9;
color: #e5e7eb;
margin: 0;
}
21 changes: 20 additions & 1 deletion examples/content-vue/content/scripts.ts
Original file line number Diff line number Diff line change
@@ -3,11 +3,30 @@ import ContentApp from './ContentApp.vue'
import './styles.css'

function initial() {
// Create a new div element and append it to the document's body
const rootDiv = document.createElement('div')
rootDiv.id = 'extension-root'
document.body.appendChild(rootDiv)

createApp(ContentApp).mount(rootDiv)
// Inject content_scripts inside a shadow DOM
// to prevent conflicts with the host page's styles.
const shadowRoot = rootDiv.attachShadow({mode: 'open'})

if (process.env.EXTENSION_MODE === 'development') {
// @ts-expect-error - Tell Extension.js to use the shadow root
// as the root element for injecting styles.
window.__EXTENSION_SHADOW_ROOT__ = shadowRoot
}

// Create a container inside the shadow DOM for the Vue app
const shadowAppContainer = document.createElement('div')
shadowAppContainer.className = 'content_script'
shadowRoot.appendChild(shadowAppContainer)

// Mount the Vue app to the container inside the shadow DOM
const app = createApp(ContentApp)
app.mount(shadowAppContainer)
}

// Initialize the app
setTimeout(initial, 1000)
2 changes: 1 addition & 1 deletion examples/content-vue/content/styles.css
Original file line number Diff line number Diff line change
@@ -2,7 +2,7 @@
@tailwind components;
@tailwind utilities;

#extension-root {
.content_script {
position: fixed;
bottom: 0;
right: 0;
20 changes: 8 additions & 12 deletions examples/content/content/scripts.js
Original file line number Diff line number Diff line change
@@ -8,25 +8,21 @@ setTimeout(initial, 1000)
function initial() {
const rootDiv = document.createElement('div')
rootDiv.id = 'extension-root'
document.body.appendChild(rootDiv)

// Injecting content_scripts inside a shadow dom
// prevents conflicts with the host page's styles.
// This way, styles from the extension won't leak into the host page.
const shadowRoot = rootDiv.attachShadow({mode: 'open'})

// Tell Extension.js to use the shadow root as the root element
// to inject styles into.
// @ts-exspect-error - Ignore TS error for global variable
window.__EXTENSION_SHADOW_ROOT__ = shadowRoot

document.body.appendChild(rootDiv)

const shadowDomContainer = document.createElement('div')
shadowDomContainer.id = 'extension-shadow-dom-container'

shadowRoot.appendChild(shadowDomContainer)
if (process.env.EXTENSION_MODE === 'development') {
// @ts-expect-error - Tell Extension.js
// to use the shadow root as the root element
// to inject styles into.
window.__EXTENSION_SHADOW_ROOT__ = shadowRoot
}

shadowDomContainer.innerHTML = `
shadowRoot.innerHTML = `
<div class="content_script">
<img class="content_logo" src="${logo}" />
<h1 class="content_title">
3 changes: 3 additions & 0 deletions examples/content/content/styles.css
Original file line number Diff line number Diff line change
@@ -24,14 +24,17 @@
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
font-weight: 700;
margin: 0;
}

.content_description {
font-size: small;
margin: 0;
}

.content_description a {
text-decoration: none;
border-bottom: 2px solid #c9c9c9;
color: #e5e7eb;
margin: 0;
}

0 comments on commit df0a236

Please sign in to comment.