feat(stencil):out of box functions, countor \ newtab timer \ events

template-stencil-ts/src/background/index.js

@@ -0,0 +1,7 @@
+console.log('background is running')
+
+chrome.runtime.onMessage.addListener((request) => {
+  if (request.type === 'COUNT') {
+    console.log('background has received a message from popup, and count is ', request?.count)
+  }
+})

template-stencil-ts/src/components.d.ts

@@ -6,6 +6,10 @@
  */
 import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
 export namespace Components {
+    interface DevtoolsRoot {
+    }
+    interface NewtabRoot {
+    }
     interface OptionsRoot {
     }
     interface PopupRoot {
@@ -14,6 +18,18 @@ export namespace Components {
     }
 }
 declare global {
+    interface HTMLDevtoolsRootElement extends Components.DevtoolsRoot, HTMLStencilElement {
+    }
+    var HTMLDevtoolsRootElement: {
+        prototype: HTMLDevtoolsRootElement;
+        new (): HTMLDevtoolsRootElement;
+    };
+    interface HTMLNewtabRootElement extends Components.NewtabRoot, HTMLStencilElement {
+    }
+    var HTMLNewtabRootElement: {
+        prototype: HTMLNewtabRootElement;
+        new (): HTMLNewtabRootElement;
+    };
     interface HTMLOptionsRootElement extends Components.OptionsRoot, HTMLStencilElement {
     }
     var HTMLOptionsRootElement: {
@@ -33,19 +49,27 @@ declare global {
         new (): HTMLSideRootElement;
     };
     interface HTMLElementTagNameMap {
+        "devtools-root": HTMLDevtoolsRootElement;
+        "newtab-root": HTMLNewtabRootElement;
         "options-root": HTMLOptionsRootElement;
         "popup-root": HTMLPopupRootElement;
         "side-root": HTMLSideRootElement;
     }
 }
 declare namespace LocalJSX {
+    interface DevtoolsRoot {
+    }
+    interface NewtabRoot {
+    }
     interface OptionsRoot {
     }
     interface PopupRoot {
     }
     interface SideRoot {
     }
     interface IntrinsicElements {
+        "devtools-root": DevtoolsRoot;
+        "newtab-root": NewtabRoot;
         "options-root": OptionsRoot;
         "popup-root": PopupRoot;
         "side-root": SideRoot;
@@ -55,6 +79,8 @@ export { LocalJSX as JSX };
 declare module "@stencil/core" {
     export namespace JSX {
         interface IntrinsicElements {
+            "devtools-root": LocalJSX.DevtoolsRoot & JSXBase.HTMLAttributes<HTMLDevtoolsRootElement>;
+            "newtab-root": LocalJSX.NewtabRoot & JSXBase.HTMLAttributes<HTMLNewtabRootElement>;
             "options-root": LocalJSX.OptionsRoot & JSXBase.HTMLAttributes<HTMLOptionsRootElement>;
             "popup-root": LocalJSX.PopupRoot & JSXBase.HTMLAttributes<HTMLPopupRootElement>;
             "side-root": LocalJSX.SideRoot & JSXBase.HTMLAttributes<HTMLSideRootElement>;

template-stencil-ts/src/components/devtools-root/devtools-root.css

@@ -0,0 +1,59 @@
+:root {
+    font-family:
+      system-ui,
+      -apple-system,
+      BlinkMacSystemFont,
+      'Segoe UI',
+      Roboto,
+      Oxygen,
+      Ubuntu,
+      Cantarell,
+      'Open Sans',
+      'Helvetica Neue',
+      sans-serif;
+
+    color-scheme: light dark;
+    background-color: #242424;
+  }
+
+  @media (prefers-color-scheme: light) {
+    :root {
+      background-color: #fafafa;
+    }
+
+    a:hover {
+      color: #5530ff;
+    }
+  }
+
+  body {
+    min-width: 20rem;
+    margin: 0;
+  }
+
+  body {
+    min-width: 20rem;
+  }
+
+  main {
+    text-align: center;
+    padding: 1em;
+    margin: 0 auto;
+  }
+
+  h3 {
+    color: #5530ff;
+    text-transform: uppercase;
+    font-size: 1.5rem;
+    font-weight: 200;
+    line-height: 1.2rem;
+    margin: 2rem auto;
+  }
+
+  a {
+    font-size: 0.5rem;
+    margin: 0.5rem;
+    color: #cccccc;
+    text-decoration: none;
+  }
+

template-stencil-ts/src/components/devtools-root/devtools-root.tsx

@@ -0,0 +1,25 @@
+import { Component, h } from '@stencil/core'
+
+chrome.devtools.panels.create('StencilCrx', '', '../../devtools.html', function () {
+  console.log('devtools panel create')
+})
+
+@Component({
+  tag: 'devtools-root',
+  styleUrl: 'devtools-root.css',
+  shadow: false,
+})
+export class DevToolsRoot {
+  private link = 'https://github.com/guocaoyi/create-chrome-ext'
+
+  render() {
+    return (
+      <main>
+        <h3>DevTools Page</h3>
+        <a href={this.link} target="_blank">
+          generated by create-chrome-ext
+        </a>
+      </main>
+    )
+  }
+}

template-stencil-ts/src/components/newtab-root/newtab-root.css

@@ -0,0 +1,63 @@
+:root {
+  font-family:
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    Oxygen,
+    Ubuntu,
+    Cantarell,
+    'Open Sans',
+    'Helvetica Neue',
+    sans-serif;
+
+  color-scheme: light dark;
+  background-color: #242424;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    background-color: #fafafa;
+  }
+}
+
+body {
+  min-width: 20rem;
+  margin: 0;
+}
+
+section::before {
+  content: '';
+  position: fixed;
+  z-index: -1;
+  width: 100vw;
+  height: 100vh;
+  background-image: url('https://source.unsplash.com/random');
+  background-size: cover;
+  filter: blur(10px);
+}
+
+section {
+  width: 100vw;
+  height: 100vh;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+}
+
+h1 {
+  color: #5530ff;
+  text-transform: uppercase;
+  font-size: 6rem;
+  margin: 2rem auto;
+}
+
+a {
+  font-size: 0.5rem;
+  margin: 0.5rem;
+  color: #cccccc;
+  text-decoration: none;
+}

template-stencil-ts/src/components/newtab-root/newtab-root.tsx

@@ -0,0 +1,42 @@
+import { Component, State, h } from '@stencil/core'
+
+const getTime = () => {
+  const date = new Date()
+  const hour = String(date.getHours()).padStart(2, '0')
+  const minute = String(date.getMinutes()).padStart(2, '0')
+  return `${hour}:${minute}`
+}
+
+@Component({
+  tag: 'newtab-root',
+  styleUrl: 'newtab-root.css',
+  shadow: false,
+})
+export class NewTabRoot {
+  private link = 'https://github.com/guocaoyi/create-chrome-ext'
+  private intervalId: any
+
+  @State() time = getTime()
+
+  componentDidRender() {
+    this.intervalId = setInterval(() => {
+      this.time = getTime()
+    }, 1000)
+  }
+
+  disconnectedCallback() {
+    clearInterval(this.intervalId)
+  }
+
+  render() {
+    return (
+      <section>
+        <span></span>
+        <h1>{this.time}</h1>
+        <a href={this.link} target="_blank">
+          generated by create-chrome-ext
+        </a>
+      </section>
+    )
+  }
+}

template-stencil-ts/src/components/options-root/options-root.css

@@ -1,31 +1,36 @@
 :root {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
-    'Open Sans', 'Helvetica Neue', sans-serif;
-  font-size: 16px;
-  line-height: 24px;
-  font-weight: 400;
+  font-family:
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    Oxygen,
+    Ubuntu,
+    Cantarell,
+    'Open Sans',
+    'Helvetica Neue',
+    sans-serif;
 
   color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
   background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-text-size-adjust: 100%;
 }
 
 @media (prefers-color-scheme: light) {
   :root {
-    color: #213547;
-    background-color: #ffffff;
+    background-color: #fafafa;
   }
+
   a:hover {
-    color: #747bff;
+    color: #5530ff;
   }
 }
 
+body {
+  min-width: 20rem;
+  margin: 0;
+}
+
 body {
   min-width: 20rem;
 }
@@ -45,21 +50,9 @@ h3 {
   margin: 2rem auto;
 }
 
-h6 {
-  font-size: 0.5rem;
-  color: #cccccc;
-  margin: 0.5rem;
-}
-
 a {
   font-size: 0.5rem;
   margin: 0.5rem;
   color: #cccccc;
   text-decoration: none;
 }
-
-@media (min-width: 480px) {
-  h3 {
-    max-width: none;
-  }
-}

template-stencil-ts/src/components/options-root/options-root.tsx

@@ -1,21 +1,33 @@
-import { Component, h } from '@stencil/core'
+import { Component, State, h } from '@stencil/core'
 
 @Component({
   tag: 'options-root',
   styleUrl: 'options-root.css',
-  shadow: true,
+  shadow: false,
 })
 export class OptionsRoot {
+  private link = 'https://github.com/guocaoyi/create-chrome-ext'
+  @State() countSync: number = 0
+
+  componentWillLoad() {
+    chrome.storage.sync.get(['count'], (result) => {
+      this.countSync = result.count || 0
+    })
+
+    chrome.runtime.onMessage.addListener((request) => {
+      if (request.type === 'COUNT') {
+        this.countSync = request.count || 0
+      }
+    })
+  }
+
   render() {
-    let crx = 'create-chrome-ext'
     return (
       <main>
-        <h3>Options Page!</h3>
-
-        <h6>v 0.0.0</h6>
-
-        <a href="https://www.npmjs.com/package/create-chrome-ext" target="_blank">
-          Power by {crx}
+        <h3>Option Page</h3>
+        <h4>Count from Popup: {this.countSync}</h4>
+        <a href={this.link} target="_blank">
+          generated by create-chrome-ext
         </a>
       </main>
     )