browserAction
-------------------------------------------------------------------------------- /packages/electron-chrome-extensions/spec/fixtures/chrome-webNavigation/background.js: -------------------------------------------------------------------------------- 1 | /* global chrome */ 2 | 3 | const eventNames = [ 4 | 'onBeforeNavigate', 5 | 'onCommitted', 6 | 'onCompleted', 7 | 'onCreatedNavigationTarget', 8 | 'onDOMContentLoaded', 9 | 'onErrorOccurred', 10 | 'onHistoryStateUpdated', 11 | 'onReferenceFragmentUpdated', 12 | 'onTabReplaced', 13 | ] 14 | 15 | let activeTabId 16 | 17 | let eventLog = [] 18 | const logEvent = (eventName) => { 19 | if (eventName) eventLog.push(eventName) 20 | if (typeof activeTabId === 'undefined') return 21 | 22 | eventLog.forEach((eventName) => { 23 | chrome.tabs.sendMessage(activeTabId, { name: 'logEvent', args: eventName }) 24 | }) 25 | 26 | eventLog = [] 27 | } 28 | 29 | eventNames.forEach((eventName) => { 30 | chrome.webNavigation[eventName].addListener(() => { 31 | logEvent(eventName) 32 | }) 33 | }) 34 | 35 | chrome.tabs.query({ active: true, windowId: chrome.windows.WINDOW_ID_CURRENT }, ([tab]) => { 36 | activeTabId = tab.id 37 | logEvent() 38 | }) 39 | 40 | console.log('background-script-evaluated') 41 | -------------------------------------------------------------------------------- /packages/electron-chrome-extensions/spec/fixtures/chrome-webNavigation/content-script.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | 3 | function evalInMainWorld(fn) { 4 | const script = document.createElement('script') 5 | script.textContent = `((${fn})())` 6 | document.documentElement.appendChild(script) 7 | } 8 | 9 | chrome.runtime.onMessage.addListener(({ name, args }) => { 10 | const funcStr = `() => { electronTest.sendIpc(${JSON.stringify(name)}, ${JSON.stringify(args)}) }` 11 | evalInMainWorld(funcStr) 12 | }) 13 | -------------------------------------------------------------------------------- /packages/electron-chrome-extensions/spec/fixtures/chrome-webNavigation/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "chrome-webNavigation", 3 | "version": "1.0", 4 | "manifest_version": 2, 5 | "content_scripts": [ 6 | { 7 | "matches": ["browserAction
-------------------------------------------------------------------------------- /packages/electron-chrome-extensions/spec/hooks.ts: -------------------------------------------------------------------------------- 1 | import { ipcMain, BrowserWindow, app, Extension, webContents } from 'electron' 2 | import * as http from 'http' 3 | import * as path from 'node:path' 4 | import { AddressInfo } from 'net' 5 | import { ElectronChromeExtensions } from '../' 6 | import { emittedOnce } from './events-helpers' 7 | import { addCrxPreload, createCrxSession, waitForBackgroundScriptEvaluated } from './crx-helpers' 8 | import { ChromeExtensionImpl } from '../dist/types/browser/impl' 9 | 10 | export const useServer = () => { 11 | const emptyPage = ` 12 | 13 | 14 |New Tab
14 |-
15 |
- https://www.google.com 16 |
- https://www.youtube.com 17 |
- 18 | https://github.com/electron/electron 19 | 20 |
- 21 | https://github.com/samuelmaddock/electron-browser-shell 24 | 25 |
- https://chromewebstore.google.com 26 |
- https://microsoftedge.microsoft.com/addons/Microsoft-Edge-Extensions-Home 27 |
- https://permission.site 28 |
- https://samuelmaddock.com 29 |
215 |
250 |
251 |
252 |
253 |
254 |
--------------------------------------------------------------------------------
/packages/shell/browser/ui/webui.js:
--------------------------------------------------------------------------------
1 | class WebUI {
2 | windowId = -1
3 | activeTabId = -1
4 | tabList = []
5 |
6 | constructor() {
7 | const $ = document.querySelector.bind(document)
8 |
9 | this.$ = {
10 | tabList: $('#tabstrip .tab-list'),
11 | tabTemplate: $('#tabtemplate'),
12 | createTabButton: $('#createtab'),
13 | goBackButton: $('#goback'),
14 | goForwardButton: $('#goforward'),
15 | reloadButton: $('#reload'),
16 | addressUrl: $('#addressurl'),
17 |
18 | browserActions: $('#actions'),
19 |
20 | minimizeButton: $('#minimize'),
21 | maximizeButton: $('#maximize'),
22 | closeButton: $('#close'),
23 | }
24 |
25 | this.$.createTabButton.addEventListener('click', () => chrome.tabs.create())
26 | this.$.goBackButton.addEventListener('click', () => chrome.tabs.goBack())
27 | this.$.goForwardButton.addEventListener('click', () => chrome.tabs.goForward())
28 | this.$.reloadButton.addEventListener('click', () => chrome.tabs.reload())
29 | this.$.addressUrl.addEventListener('keypress', this.onAddressUrlKeyPress.bind(this))
30 |
31 | this.$.minimizeButton.addEventListener('click', () =>
32 | chrome.windows.get(chrome.windows.WINDOW_ID_CURRENT, (win) => {
33 | chrome.windows.update(win.id, { state: win.state === 'minimized' ? 'normal' : 'minimized' })
34 | }),
35 | )
36 | this.$.maximizeButton.addEventListener('click', () =>
37 | chrome.windows.get(chrome.windows.WINDOW_ID_CURRENT, (win) => {
38 | chrome.windows.update(win.id, { state: win.state === 'maximized' ? 'normal' : 'maximized' })
39 | }),
40 | )
41 | this.$.closeButton.addEventListener('click', () => chrome.windows.remove())
42 |
43 | const platformClass = `platform-${navigator.userAgentData.platform.toLowerCase()}`
44 | document.body.classList.add(platformClass)
45 |
46 | this.initTabs()
47 | }
48 |
49 | async initTabs() {
50 | const tabs = await new Promise((resolve) => chrome.tabs.query({ windowId: -2 }, resolve))
51 | this.tabList = [...tabs]
52 | this.renderTabs()
53 |
54 | const activeTab = this.tabList.find((tab) => tab.active)
55 | if (activeTab) {
56 | this.setActiveTab(activeTab)
57 | }
58 |
59 | // Wait to setup tabs and windowId prior to listening for updates.
60 | this.setupBrowserListeners()
61 | }
62 |
63 | setupBrowserListeners() {
64 | if (!chrome.tabs.onCreated) {
65 | throw new Error(`chrome global not setup. Did the extension preload not get run?`)
66 | }
67 |
68 | const findTab = (tabId) => {
69 | const existingTab = this.tabList.find((tab) => tab.id === tabId)
70 | return existingTab
71 | }
72 |
73 | const findOrCreateTab = (tabId) => {
74 | const existingTab = findTab(tabId)
75 | if (existingTab) return existingTab
76 |
77 | const newTab = { id: tabId }
78 | this.tabList.push(newTab)
79 | return newTab
80 | }
81 |
82 | chrome.tabs.onCreated.addListener((tab) => {
83 | if (tab.windowId !== this.windowId) return
84 | const newTab = findOrCreateTab(tab.id)
85 | Object.assign(newTab, tab)
86 | this.renderTabs()
87 | })
88 |
89 | chrome.tabs.onActivated.addListener((activeInfo) => {
90 | if (activeInfo.windowId !== this.windowId) return
91 |
92 | this.setActiveTab(activeInfo)
93 | })
94 |
95 | chrome.tabs.onUpdated.addListener((tabId, changeInfo, details) => {
96 | const tab = findTab(tabId)
97 | if (!tab) return
98 | Object.assign(tab, details)
99 | this.renderTabs()
100 | if (tabId === this.activeTabId) this.renderToolbar(tab)
101 | })
102 |
103 | chrome.tabs.onRemoved.addListener((tabId) => {
104 | const tabIndex = this.tabList.findIndex((tab) => tab.id === tabId)
105 | if (tabIndex > -1) {
106 | this.tabList.splice(tabIndex, 1)
107 | this.$.tabList.querySelector(`[data-tab-id="${tabId}"]`).remove()
108 | }
109 | })
110 | }
111 |
112 | setActiveTab(activeTab) {
113 | this.activeTabId = activeTab.id || activeTab.tabId
114 | this.windowId = activeTab.windowId
115 |
116 | for (const tab of this.tabList) {
117 | if (tab.id === this.activeTabId) {
118 | tab.active = true
119 | this.renderTab(tab)
120 | this.renderToolbar(tab)
121 | } else {
122 | tab.active = false
123 | }
124 | }
125 | }
126 |
127 | onAddressUrlKeyPress(event) {
128 | if (event.code === 'Enter') {
129 | const url = this.$.addressUrl.value
130 | chrome.tabs.update({ url })
131 | }
132 | }
133 |
134 | createTabNode(tab) {
135 | const tabElem = this.$.tabTemplate.content.cloneNode(true).firstElementChild
136 | tabElem.dataset.tabId = tab.id
137 |
138 | tabElem.addEventListener('click', () => {
139 | chrome.tabs.update(tab.id, { active: true })
140 | })
141 | tabElem.querySelector('.close').addEventListener('click', () => {
142 | chrome.tabs.remove(tab.id)
143 | })
144 | const faviconElem = tabElem.querySelector('.favicon')
145 | faviconElem?.addEventListener('load', () => {
146 | faviconElem.classList.toggle('loaded', true)
147 | })
148 | faviconElem?.addEventListener('error', () => {
149 | faviconElem.classList.toggle('loaded', false)
150 | })
151 |
152 | this.$.tabList.appendChild(tabElem)
153 | return tabElem
154 | }
155 |
156 | renderTab(tab) {
157 | let tabElem = this.$.tabList.querySelector(`[data-tab-id="${tab.id}"]`)
158 | if (!tabElem) tabElem = this.createTabNode(tab)
159 |
160 | if (tab.active) {
161 | tabElem.dataset.active = ''
162 | } else {
163 | delete tabElem.dataset.active
164 | }
165 |
166 | const favicon = tabElem.querySelector('.favicon')
167 | if (tab.favIconUrl) {
168 | favicon.src = tab.favIconUrl
169 | } else {
170 | delete favicon.src
171 | }
172 |
173 | tabElem.querySelector('.title').textContent = tab.title
174 | tabElem.querySelector('.audio').disabled = !tab.audible
175 | }
176 |
177 | renderTabs() {
178 | this.tabList.forEach((tab) => {
179 | this.renderTab(tab)
180 | })
181 | }
182 |
183 | renderToolbar(tab) {
184 | this.$.addressUrl.value = tab.url
185 | // this.$.browserActions.tab = tab.id
186 | }
187 | }
188 |
189 | window.webui = new WebUI()
190 |
--------------------------------------------------------------------------------
/packages/shell/forge.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | packagerConfig: {
3 | name: 'Shell',
4 | asar: true,
5 | extraResource: ['browser/ui'],
6 | },
7 | rebuildConfig: {},
8 | makers: [
9 | {
10 | name: '@electron-forge/maker-zip',
11 | platforms: ['darwin', 'win32'],
12 | },
13 | {
14 | name: '@electron-forge/maker-dmg',
15 | platforms: ['darwin'],
16 | },
17 | ],
18 | plugins: [
19 | {
20 | name: '@electron-forge/plugin-webpack',
21 | config: {
22 | mainConfig: './webpack.main.config.js',
23 | renderer: {
24 | config: './webpack.renderer.config.js',
25 | entryPoints: [
26 | {
27 | name: 'browser',
28 | preload: {
29 | js: './preload.ts',
30 | },
31 | },
32 | ],
33 | },
34 | devServer: {
35 | client: {
36 | overlay: false,
37 | },
38 | },
39 | },
40 | },
41 | ].filter(Boolean),
42 | }
43 |
--------------------------------------------------------------------------------
/packages/shell/index.js:
--------------------------------------------------------------------------------
1 | const Browser = require('./browser/main')
2 | new Browser()
3 |
--------------------------------------------------------------------------------
/packages/shell/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "shell",
3 | "productName": "Shell",
4 | "version": "2.2.0",
5 | "description": "Minimum Viable Browser shell built on Electron.",
6 | "main": ".webpack/main",
7 | "scripts": {
8 | "build": "npm run package",
9 | "start": "electron-forge start",
10 | "start:trace": "electron-forge start -- --trace-startup=\"*\" --trace-startup-file=\"$HOME/Desktop/trace.json\"",
11 | "package": "electron-forge package",
12 | "make": "electron-forge make"
13 | },
14 | "license": "MIT",
15 | "author": "Samuel Maddock
216 |
238 |
249 |
217 |
237 | -
218 |
219 |
-
220 |
221 | 222 |
223 | 224 | 225 |226 |
227 |
228 |
232 |
233 |
234 |
235 |
236 |