extension-create 4.0.9 → 4.0.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,5 +1,4 @@
1
- import iconUrl from '../images/icon.png'
2
- const logo = iconUrl
1
+ import logo from '../images/icon.png'
3
2
 
4
3
  export default function createContentApp() {
5
4
  const container = document.createElement('div')
@@ -1,7 +1,8 @@
1
- console.log('[From the page context] Hello from content_scripts!')
2
1
  import createContentApp from './ContentApp.js'
3
2
  import './styles.css'
4
3
 
4
+ console.log('[From the page context] Hello from content_scripts!')
5
+
5
6
  /**
6
7
  * Extension.js content_script entrypoint. The framework calls this on
7
8
  * injection and calls the returned function on HMR/teardown to clean up.
@@ -10,6 +11,10 @@ import './styles.css'
10
11
  export default function initial() {
11
12
  const rootDiv = document.createElement('div')
12
13
  rootDiv.setAttribute('data-extension-root', 'true')
14
+ // Isolate the host from page styles (e.g. example.com ships div{opacity:.8},
15
+ // which would otherwise fade the whole widget): the shadow DOM only protects
16
+ // descendants; the host element itself still takes page CSS.
17
+ rootDiv.style.cssText = 'all: initial !important'
13
18
  document.body.appendChild(rootDiv)
14
19
 
15
20
  // Injecting content_scripts inside a shadow dom
@@ -19,6 +24,7 @@ export default function initial() {
19
24
 
20
25
  const styleElement = document.createElement('style')
21
26
  shadowRoot.appendChild(styleElement)
27
+
22
28
  fetchCSS().then((response) => (styleElement.textContent = response))
23
29
 
24
30
  // Render ContentApp inside shadow root
@@ -1,7 +1,5 @@
1
1
  import './styles.css'
2
- import iconUrl from '../images/icon.png'
3
-
4
- const javascriptLogo = iconUrl
2
+ import javascriptLogo from '../images/icon.png'
5
3
 
6
4
  function SidebarApp() {
7
5
  const root = document.getElementById('root')
@@ -1,3 +1,4 @@
1
- console.log('[From the sidebar page context] Hello regular page!')
2
1
  import './SidebarApp.js'
3
2
  import './styles.css'
3
+
4
+ console.log('[From the sidebar page context] Hello regular page!')
package/package.json CHANGED
@@ -25,7 +25,7 @@
25
25
  "templates"
26
26
  ],
27
27
  "name": "extension-create",
28
- "version": "4.0.9",
28
+ "version": "4.0.10",
29
29
  "description": "The standalone extension creation engine for Extension.js",
30
30
  "author": {
31
31
  "name": "Cezar Augusto",
@@ -1,7 +1,7 @@
1
1
  [powered-image]: https://img.shields.io/badge/Powered%20by-Extension.js-0971fe
2
2
  [powered-url]: https://extension.js.org
3
3
 
4
- ![Powered by Extension.js][powered-image]
4
+ [![Powered by Extension.js][powered-image]][powered-url]
5
5
 
6
6
  # JavaScript Starter Extension
7
7
 
@@ -1,5 +1,4 @@
1
- import iconUrl from '../images/icon.png'
2
- const logo = iconUrl
1
+ import logo from '../images/icon.png'
3
2
 
4
3
  export default function createContentApp() {
5
4
  const container = document.createElement('div')
@@ -1,7 +1,8 @@
1
- console.log('[From the page context] Hello from content_scripts!')
2
1
  import createContentApp from './ContentApp.js'
3
2
  import './styles.css'
4
3
 
4
+ console.log('[From the page context] Hello from content_scripts!')
5
+
5
6
  /**
6
7
  * Extension.js content_script entrypoint. The framework calls this on
7
8
  * injection and calls the returned function on HMR/teardown to clean up.
@@ -10,6 +11,10 @@ import './styles.css'
10
11
  export default function initial() {
11
12
  const rootDiv = document.createElement('div')
12
13
  rootDiv.setAttribute('data-extension-root', 'true')
14
+ // Isolate the host from page styles (e.g. example.com ships div{opacity:.8},
15
+ // which would otherwise fade the whole widget): the shadow DOM only protects
16
+ // descendants; the host element itself still takes page CSS.
17
+ rootDiv.style.cssText = 'all: initial !important'
13
18
  document.body.appendChild(rootDiv)
14
19
 
15
20
  // Injecting content_scripts inside a shadow dom
@@ -19,6 +24,7 @@ export default function initial() {
19
24
 
20
25
  const styleElement = document.createElement('style')
21
26
  shadowRoot.appendChild(styleElement)
27
+
22
28
  fetchCSS().then((response) => (styleElement.textContent = response))
23
29
 
24
30
  // Render ContentApp inside shadow root
@@ -1,7 +1,5 @@
1
1
  import './styles.css'
2
- import iconUrl from '../images/icon.png'
3
-
4
- const javascriptLogo = iconUrl
2
+ import javascriptLogo from '../images/icon.png'
5
3
 
6
4
  function SidebarApp() {
7
5
  const root = document.getElementById('root')
@@ -1,3 +1,4 @@
1
- console.log('[From the sidebar page context] Hello regular page!')
2
1
  import './SidebarApp.js'
3
2
  import './styles.css'
3
+
4
+ console.log('[From the sidebar page context] Hello regular page!')