Skip to content

Commit 37e3a56

Browse files
aekscoaeksco
authored
Merge pull request #46 from DesignString/migration-manifest-v3
Migrate Chrome Extension manfiest.json to V3
2 parents 98fbc85 + 6860e95 commit 37e3a56

File tree

9 files changed

+61
-35
lines changed

9 files changed

+61
-35
lines changed

‎.storybook/main.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,14 +31,14 @@ module.exports = {
3131
config.plugins = [
3232
...config.plugins,
3333
new webpack.NormalModuleReplacementPlugin(
34-
/webextension-polyfill-ts/,
34+
/webextension-polyfill/,
3535
(resource) => {
3636
// Gets absolute path to mock `webextension-polyfill-ts` package
3737
// NOTE: this is required beacuse the `webextension-polyfill-ts`
3838
// package can't be used outside the environment provided by web extensions
3939
const absRootMockPath = path.resolve(
4040
__dirname,
41-
"../src/__mocks__/webextension-polyfill-ts.ts",
41+
"../src/__mocks__/webextension-polyfill.ts",
4242
);
4343

4444
// Gets relative path from requesting module to our mocked module

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,7 @@ In [Microsoft Edge](https://www.microsoft.com/en-us/edge), open up [edge://exten
101101
- [Webpack](https://webpack.js.org/)
102102
- [Babel](https://babeljs.io/)
103103
- [TailwindCSS](https://tailwindcss.com/)
104-
- [webextension-polyfill-ts](https://github.com/Lusito/webextension-polyfill-ts)
104+
- [webextension-polyfill](https://github.com/mozilla/webextension-polyfill)
105105

106106
**Misc. References**
107107

‎dist/manifest.json‎

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,26 @@
1+
12
{
2-
"manifest_version": 2,
3+
"manifest_version": 3,
34
"name": "Chrome Extension Starter",
45
"description": "A Chrome Extension starter kit",
56
"version": "1.0.0",
6-
"browser_action": {
7-
"default_icon": "icon-16.png",
7+
"action": {
8+
"default_icon": {
9+
"16": "icon-16.png",
10+
"48": "icon-48.png",
11+
"128": "icon-128.png"
12+
},
813
"default_popup": "popup.html"
914
},
1015
"background": {
11-
"scripts": ["js/backgroundPage.js"],
12-
"persistent": false
16+
"service_worker": "js/backgroundPage.js"
1317
},
1418
"icons": {
1519
"16": "icon-16.png",
1620
"48": "icon-48.png",
1721
"128": "icon-128.png"
1822
},
19-
"permissions": ["tabs", "activeTab", "notifications", "http://*/", "https://*/"]
23+
"host_permissions": ["https:\/\/*/*"],
24+
"permissions": ["tabs", "activeTab", "notifications", "scripting"]
2025
}
26+

‎package.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@
4545
"@types/react": "^17.0.2",
4646
"@types/react-dom": "^17.0.2",
4747
"@types/react-test-renderer": "^17.0.1",
48+
"@types/webextension-polyfill": "^0.9.0",
4849
"@typescript-eslint/eslint-plugin": "^4.4.1",
4950
"@typescript-eslint/parser": "^4.4.1",
5051
"autoprefixer": "^10.4.1",
@@ -67,13 +68,13 @@
6768
"ts-jest": "^26.4.1",
6869
"ts-loader": "^8.0.5",
6970
"typescript": "^4.0.3",
70-
"webextension-polyfill-ts": "^0.20.0",
7171
"webpack": "^5.65.0",
7272
"webpack-cli": "^4.9.1",
7373
"webpack-merge": "^5.8.0"
7474
},
7575
"dependencies": {
7676
"react": "^17.0.2",
77-
"react-dom": "^17.0.2"
77+
"react-dom": "^17.0.2",
78+
"webextension-polyfill": "^0.9.0"
7879
}
7980
}

src/__mocks__/webextension-polyfill-ts.ts renamed to src/__mocks__/webextension-polyfill.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
// src/__mocks__/webextension-polyfill-ts
2-
// Update this file to include any mocks for the `webextension-polyfill-ts` package
1+
// src/__mocks__/webextension-polyfill
2+
// Update this file to include any mocks for the `webextension-polyfill` package
33
// This is used to mock these values for Storybook so you can develop your components
44
// outside the Web Extension environment provided by a compatible browser
5-
// See .storybook/main.js to see how this module is swapped in for `webextension-polyfill-ts`
5+
// See .storybook/main.js to see how this module is swapped in for `webextension-polyfill`
66
export const browser: any = {
77
tabs: {
88
executeScript(currentTabId: number, details: any) {

‎src/backgroundPage.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { browser } from "webextension-polyfill-ts";
1+
import browser from "webextension-polyfill";
22

33
// Listen for messages sent from other parts of the extension
44
browser.runtime.onMessage.addListener((request: { popupMounted: boolean }) => {

‎src/popup/component.tsx‎

Lines changed: 19 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,45 @@
11
import React from "react";
22
import { Hello } from "@src/components/hello";
3-
import { browser, Tabs } from "webextension-polyfill-ts";
3+
import browser, { Tabs } from "webextension-polyfill";
44
import { Scroller } from "@src/components/scroller";
55
import css from "./styles.module.css";
66

77
// // // //
88

99
// Scripts to execute in current tab
10-
const scrollToTopScript = `window.scroll(0,0)`;
11-
const scrollToBottomScript = `window.scroll(0,9999999)`;
10+
const scrollToTopPosition = 0;
11+
const scrollToBottomPosition = 9999999;
12+
13+
function scrollWindow(position: number) {
14+
window.scroll(0,position);
15+
}
1216

1317
/**
1418
* Executes a string of Javascript on the current tab
1519
* @param code The string of code to execute on the current tab
1620
*/
17-
function executeScript(code: string): void {
21+
function executeScript(position: number): void {
1822
// Query for the active tab in the current window
1923
browser.tabs
2024
.query({ active: true, currentWindow: true })
2125
.then((tabs: Tabs.Tab[]) => {
2226
// Pulls current tab from browser.tabs.query response
23-
const currentTab: Tabs.Tab | undefined = tabs[0];
27+
const currentTab: Tabs.Tab | number = tabs[0];
2428

2529
// Short circuits function execution is current tab isn't found
2630
if (!currentTab) {
2731
return;
2832
}
33+
const currentTabId: number = currentTab.id as number;
2934

3035
// Executes the script in the current tab
31-
browser.tabs
32-
.executeScript(currentTab.id, {
33-
code,
36+
browser.scripting
37+
.executeScript({
38+
target: {
39+
tabId: currentTabId
40+
},
41+
func: scrollWindow,
42+
args: [position]
3443
})
3544
.then(() => {
3645
console.log("Done Scrolling");
@@ -54,10 +63,10 @@ export function Popup() {
5463
<hr />
5564
<Scroller
5665
onClickScrollTop={() => {
57-
executeScript(scrollToTopScript);
66+
executeScript(scrollToTopPosition);
5867
}}
5968
onClickScrollBottom={() => {
60-
executeScript(scrollToBottomScript);
69+
executeScript(scrollToBottomPosition);
6170
}}
6271
/>
6372
</div>

‎src/popup/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import * as React from "react";
22
import * as ReactDOM from "react-dom";
3-
import { browser } from "webextension-polyfill-ts";
3+
import browser from "webextension-polyfill";
44
import { Popup } from "./component";
55
import "../css/app.css";
66

‎yarn.lock‎

Lines changed: 19 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2997,6 +2997,11 @@
29972997
resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.6.tgz#250a7b16c3b91f672a24552ec64678eeb1d3a08d"
29982998
integrity sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==
29992999

3000+
"@types/webextension-polyfill@^0.9.0":
3001+
version "0.9.0"
3002+
resolved "https://registry.yarnpkg.com/@types/webextension-polyfill/-/webextension-polyfill-0.9.0.tgz#a50b5f03161ef83e46721719b49668cfcaac804a"
3003+
integrity sha512-HG1y1o2hK8ag6Y7dfkrAbfKmMIP+B0E6SwAzUfmQ1dDxEIdLTtMyrStY26suHBPrAL7Xw/chlDW02ugc3uXWtQ==
3004+
30003005
"@types/webpack-env@^1.16.0":
30013006
version "1.16.3"
30023007
resolved "https://registry.yarnpkg.com/@types/webpack-env/-/webpack-env-1.16.3.tgz#b776327a73e561b71e7881d0cd6d34a1424db86a"
@@ -12219,17 +12224,22 @@ web-namespaces@^1.0.0:
1221912224
resolved "https://registry.yarnpkg.com/web-namespaces/-/web-namespaces-1.1.4.tgz#bc98a3de60dadd7faefc403d1076d529f5e030ec"
1222012225
integrity sha512-wYxSGajtmoP4WxfejAPIr4l0fVh+jeMXZb08wNc0tMg6xsfZXj3cECqIK0G7ZAqUq0PP8WlMDtaOGVBTAWztNw==
1222112226

12222-
webextension-polyfill-ts@^0.20.0:
12223-
version "0.20.0"
12224-
resolved "https://registry.yarnpkg.com/webextension-polyfill-ts/-/webextension-polyfill-ts-0.20.0.tgz#1f83bf745492a9eb394f0e18fa229e0a9e8c645d"
12225-
integrity sha512-p/7by/+F+CuXF4PpBtqbdAFudUVe5X/PDjIqSS01zGR0GP8+XEh0YPLqj0+3trpLNom0jsiAjphfXLQubFdCqw==
12227+
webextension-polyfill-ts@^0.26.0:
12228+
version "0.26.0"
12229+
resolved "https://registry.yarnpkg.com/webextension-polyfill-ts/-/webextension-polyfill-ts-0.26.0.tgz#80b7063ddaf99abaa1ca73aad0cec09f306612d3"
12230+
integrity sha512-XEFL+aYVEsm/d4RajVwP75g56c/w2aSHnPwgtUv8/nCzbLNSzRQIix6aj1xqFkA5yr7OIDkk3OD/QTnPp8ThYA==
1222612231
dependencies:
12227-
webextension-polyfill "^0.6.0"
12232+
webextension-polyfill "^0.8.0"
1222812233

12229-
webextension-polyfill@^0.6.0:
12230-
version "0.6.0"
12231-
resolved "https://registry.yarnpkg.com/webextension-polyfill/-/webextension-polyfill-0.6.0.tgz#1afd925f3274a0d4848083579b9c0b649a5c6763"
12232-
integrity sha512-PlYwiX8e4bNZrEeBFxbFFsLtm0SMPxJliLTGdNCA0Bq2XkWrAn2ejUd+89vZm+8BnfFB1BclJyCz3iKsm2atNg==
12234+
webextension-polyfill@^0.8.0:
12235+
version "0.8.0"
12236+
resolved "https://registry.yarnpkg.com/webextension-polyfill/-/webextension-polyfill-0.8.0.tgz#f80e9f4b7f81820c420abd6ffbebfa838c60e041"
12237+
integrity sha512-a19+DzlT6Kp9/UI+mF9XQopeZ+n2ussjhxHJ4/pmIGge9ijCDz7Gn93mNnjpZAk95T4Tae8iHZ6sSf869txqiQ==
12238+
12239+
webextension-polyfill@^0.9.0:
12240+
version "0.9.0"
12241+
resolved "https://registry.yarnpkg.com/webextension-polyfill/-/webextension-polyfill-0.9.0.tgz#de6c1941d0ef1b0858b20e9c7b46bbc042c5a960"
12242+
integrity sha512-LTtHb0yR49xa9irkstDxba4GATDAcDw3ncnFH9RImoFwDlW47U95ME5sn5IiQX2ghfaECaf6xyXM8yvClIBkkw==
1223312243

1223412244
webidl-conversions@^3.0.0:
1223512245
version "3.0.1"

0 commit comments

Comments
 (0)