Skip to content

Commit 29c675f

Browse files
ArpanKundu97Arpan Kundu
ArpanKundu97
and
Arpan Kundu
authored
Web Clipper Migration to Manifest v3 in Microsoft Edge (#571)
* initial changes to load clipper in edge after migrating to manifest v3 * bundle offscreen for both chrome and edge --------- Co-authored-by: Arpan Kundu <[email protected]>
1 parent 1d4bfd8 commit 29c675f

File tree

10 files changed

+121
-43
lines changed

10 files changed

+121
-43
lines changed

‎gulpfile.js

+30-14
Original file line numberDiff line numberDiff line change
@@ -229,6 +229,13 @@ gulp.task("bundleAppendIsInstalledMarker", function () {
229229
return merge(tasks);
230230
});
231231

232+
gulp.task("bundleOffscreen", function () {
233+
var extensionRoot = PATHS.BUILDROOT + "scripts/extensions/";
234+
var files = ["offscreen.js"];
235+
var tasks = generateBrowserifyTasks(extensionRoot, files);
236+
return merge(tasks);
237+
});
238+
232239
gulp.task("bundleClipperUI", function () {
233240
var extensionRoot = PATHS.BUILDROOT + "scripts/clipperUI/";
234241
var files = ["clipper.js", "pageNav.js", "localeSpecificTasks.js", "unsupportedBrowser.js"];
@@ -263,7 +270,7 @@ gulp.task("bundleBookmarklet", function() {
263270

264271
gulp.task("bundleChrome", function() {
265272
var extensionRoot = PATHS.BUILDROOT + "scripts/extensions/chrome/";
266-
var files = ["chromeExtension.js", "chromeDebugLoggingInject.js", "chromeInject.js", "chromePageNavInject.js", "chromeOffscreen.js"];
273+
var files = ["chromeExtension.js", "chromeDebugLoggingInject.js", "chromeInject.js", "chromePageNavInject.js"];
267274
var tasks = generateBrowserifyTasks(extensionRoot, files);
268275
return merge(tasks);
269276
});
@@ -299,6 +306,7 @@ gulp.task("bundleTests", function () {
299306
gulp.task("bundle", function(callback) {
300307
runSequence(
301308
"bundleAppendIsInstalledMarker",
309+
"bundleOffscreen",
302310
"bundleClipperUI",
303311
"bundleLogManager",
304312
"bundleBookmarklet",
@@ -512,6 +520,10 @@ function exportChromeJS() {
512520
PATHS.BUNDLEROOT + "appendIsInstalledMarker.js"
513521
]).pipe(concat("appendIsInstalledMarker.js")).pipe(gulp.dest(targetDir));
514522

523+
var offscreenTask = gulp.src([
524+
PATHS.BUNDLEROOT + "offscreen.js"
525+
]).pipe(concat("offscreen.js")).pipe(gulp.dest(targetDir));
526+
515527
var chromeExtensionTask = gulp.src([
516528
targetDir + "logManager.js",
517529
targetDir + "oneNoteApi.min.js",
@@ -536,14 +548,10 @@ function exportChromeJS() {
536548
PATHS.BUNDLEROOT + "chromePageNavInject.js"
537549
]).pipe(concat("chromePageNavInject.js")).pipe(gulp.dest(targetDir));
538550

539-
var chromeOffscreenTask = gulp.src([
540-
PATHS.BUNDLEROOT + "chromeOffscreen.js"
541-
]).pipe(gulp.dest(targetDir));
542-
543551
if (commonTask) {
544-
return merge(commonTask, appendIsInstalledMarkerTask, chromeExtensionTask, chromeDebugLoggingInjectTask, chromeInjectTask, chromePageNavInjectTask, chromeOffscreenTask);
552+
return merge(commonTask, appendIsInstalledMarkerTask, offscreenTask, chromeExtensionTask, chromeDebugLoggingInjectTask, chromeInjectTask, chromePageNavInjectTask);
545553
}
546-
return merge(chromeExtensionTask, appendIsInstalledMarkerTask, chromeDebugLoggingInjectTask, chromeInjectTask, chromePageNavInjectTask, chromeOffscreenTask);
554+
return merge(chromeExtensionTask, appendIsInstalledMarkerTask, offscreenTask, chromeDebugLoggingInjectTask, chromeInjectTask, chromePageNavInjectTask);
547555
}
548556

549557
function exportChromeCSS() {
@@ -561,11 +569,11 @@ function exportChromeSrcFiles() {
561569
PATHS.SRC.ROOT + "scripts/extensions/chrome/manifest.json"
562570
]).pipe(gulp.dest(targetDir));
563571

564-
var chromeOffscreenTask = gulp.src([
565-
PATHS.SRC.ROOT + "scripts/extensions/chrome/chromeOffscreen.html"
572+
var offscreenTask = gulp.src([
573+
PATHS.SRC.ROOT + "scripts/extensions/offscreen.html"
566574
]).pipe(gulp.dest(targetDir));
567575

568-
return merge(srcCommonTask, commonWebExtensionFiles, chromeTask, chromeOffscreenTask);
576+
return merge(srcCommonTask, commonWebExtensionFiles, chromeTask, offscreenTask);
569577
}
570578

571579
function exportChromeLibFiles() {
@@ -582,6 +590,10 @@ function exportEdgeJS() {
582590
PATHS.BUNDLEROOT + "appendIsInstalledMarker.js"
583591
]).pipe(concat("appendIsInstalledMarker.js")).pipe(gulp.dest(targetDir));
584592

593+
var offscreenTask = gulp.src([
594+
PATHS.BUNDLEROOT + "offscreen.js"
595+
]).pipe(concat("offscreen.js")).pipe(gulp.dest(targetDir));
596+
585597
var edgeExtensionTask = gulp.src([
586598
targetDir + "logManager.js",
587599
targetDir + "oneNoteApi.min.js",
@@ -607,9 +619,9 @@ function exportEdgeJS() {
607619
]).pipe(concat("edgePageNavInject.js")).pipe(gulp.dest(targetDir));
608620

609621
if (commonTask) {
610-
return merge(commonTask, appendIsInstalledMarkerTask, edgeExtensionTask, edgeDebugLoggingInjectTask, edgeInjectTask, edgePageNavInjectTask);
622+
return merge(commonTask, appendIsInstalledMarkerTask, offscreenTask, edgeExtensionTask, edgeDebugLoggingInjectTask, edgeInjectTask, edgePageNavInjectTask);
611623
}
612-
return merge(edgeExtensionTask, appendIsInstalledMarkerTask, edgeDebugLoggingInjectTask, edgeInjectTask, edgePageNavInjectTask);
624+
return merge(edgeExtensionTask, appendIsInstalledMarkerTask, offscreenTask, edgeDebugLoggingInjectTask, edgeInjectTask, edgePageNavInjectTask);
613625
}
614626

615627
function exportEdgeCSS() {
@@ -628,7 +640,11 @@ function exportEdgeSrcFiles() {
628640
PATHS.SRC.ROOT + "scripts/extensions/edge/manifest.json"
629641
]).pipe(gulp.dest(targetDir));
630642

631-
return merge(srcCommonTask, commonWebExtensionFiles, edgeTask);
643+
var offscreenTask = gulp.src([
644+
PATHS.SRC.ROOT + "scripts/extensions/offscreen.html"
645+
]).pipe(gulp.dest(targetDir));
646+
647+
return merge(srcCommonTask, commonWebExtensionFiles, edgeTask, offscreenTask);
632648
}
633649

634650
function exportEdgePackageFiles() {
@@ -1049,7 +1065,7 @@ gulp.task("watchSrcFiles", function() {
10491065
PATHS.SRC.ROOT + "unsupportedBrowser.html",
10501066
PATHS.SRC.ROOT + "pageNav.html",
10511067
PATHS.SRC.ROOT + "scripts/extensions/chrome/manifest.json",
1052-
PATHS.SRC.ROOT + "scripts/extensions/chrome/chromeOffscreen.html",
1068+
PATHS.SRC.ROOT + "scripts/extensions/offscreen.html",
10531069
PATHS.SRC.ROOT + "scripts/extensions/edge/edgeExtension.html",
10541070
PATHS.SRC.ROOT + "scripts/extensions/edge/manifest.json",
10551071
PATHS.SRC.ROOT + "scripts/extensions/safari/Info.plist",

‎package-lock.json

+45-6
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/scripts/clipperUI/clipper.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -520,11 +520,11 @@ class ClipperClass extends ComponentBase<ClipperState, {}> {
520520
* The following initializations are necessary to make use of
521521
* an offscreen document from the clipper UI.
522522
*/
523-
if (updatedClientInfo.clipperType === ClientType.ChromeExtension) {
523+
if (updatedClientInfo.clipperType === ClientType.ChromeExtension || updatedClientInfo.clipperType === ClientType.EdgeExtension) {
524524
WebExtension.browser = chrome;
525-
WebExtension.offscreenUrl = chrome.runtime.getURL("chromeOffscreen.html");
526-
} else if (updatedClientInfo.clipperType === ClientType.EdgeExtension) {
527-
// TODO: Edge specific initialization
525+
WebExtension.offscreenUrl = chrome.runtime.getURL("offscreen.html");
526+
} else {
527+
// Do nothing since clipper has been deprecated for other browsers
528528
}
529529
}
530530
});

‎src/scripts/extensions/chrome/chromeExtension.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { ClientType } from "../../clientType";
22
import { WebExtension } from "../webExtensionBase/webExtension";
33

44
WebExtension.browser = chrome;
5-
WebExtension.offscreenUrl = chrome.runtime.getURL("chromeOffscreen.html");
5+
WebExtension.offscreenUrl = chrome.runtime.getURL("offscreen.html");
66

77
let clipperBackground = new WebExtension(ClientType.ChromeExtension, {
88
debugLoggingInjectUrl: "chromeDebugLoggingInject.js",

‎src/scripts/extensions/chrome/chromeOffscreen.html

-2
This file was deleted.

‎src/scripts/extensions/edge/edgeExtension.ts

+6-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,12 @@ import {WebExtension} from "../webExtensionBase/webExtension";
44

55
declare var browser;
66

7-
WebExtension.browser = ("browser" in window) ? browser : chrome;
7+
/**
8+
* There is no need to check the window object for the browser property
9+
* since the window object is no longer available with Manifest V3
10+
*/
11+
WebExtension.browser = chrome;
12+
WebExtension.offscreenUrl = chrome.runtime.getURL("offscreen.html");
813

914
let clipperBackground = new WebExtension(ClientType.EdgeExtension, {
1015
debugLoggingInjectUrl: "edgeDebugLoggingInject.js",

‎src/scripts/extensions/edge/edgeInject.ts

+5-1
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,12 @@ import {WebExtension} from "../webExtensionBase/webExtension";
33
import {WebExtensionContentMessageHandler} from "../webExtensionBase/webExtensionMessageHandler";
44

55
declare var browser;
6-
WebExtension.browser = ("browser" in window) ? browser : chrome;
76

7+
/**
8+
* There is no need to check the window object for the browser property
9+
* since the window object is no longer available with Manifest V3
10+
*/
11+
WebExtension.browser = chrome;
812
const frameUrl = WebExtension.browser.runtime.getURL("clipper.html");
913

1014
invoke({

‎src/scripts/extensions/edge/manifest.json

+27-13
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
{
2-
"manifest_version": 2,
2+
"manifest_version": 3,
33
"author": "Microsoft Corporation",
44
"name": "OneNote Web Clipper",
55
"description": "__MSG_appDesc__",
66
"default_locale": "en",
77
"version": "3.10.3",
88
"background": {
9-
"scripts": ["edgeExtension.js"],
10-
"persistent": true
9+
"service_worker": "edgeExtension.js",
10+
"type": "module"
1111
},
1212

1313
"content_scripts": [{
@@ -18,28 +18,34 @@
1818
}],
1919

2020
"web_accessible_resources": [
21-
"clipper.html"
21+
{
22+
"resources": [
23+
"clipper.html"
24+
],
25+
"matches": [
26+
"<all_urls>"
27+
]
28+
}
2229
],
2330

2431
"permissions": [
25-
"<all_urls>",
2632
"activeTab",
33+
"scripting",
2734
"contextMenus",
2835
"cookies",
2936
"tabs",
3037
"webRequest",
3138
"storage",
32-
"webNavigation"
39+
"webNavigation",
40+
"offscreen"
3341
],
3442

35-
"content_security_policy": "script-src 'self'; object-src 'self'",
43+
"host_permissions": [
44+
"<all_urls>"
45+
],
3646

37-
"browser_action": {
38-
"default_title": "Clip to OneNote",
39-
"default_icon": {
40-
"19": "icons/icon-19.png",
41-
"38": "icons/icon-38.png"
42-
}
47+
"content_security_policy": {
48+
"extension_pages": "script-src 'self'; object-src 'self'"
4349
},
4450

4551
"icons": {
@@ -52,5 +58,13 @@
5258
"96": "icons/icon-96.png",
5359
"128": "icons/icon-128.png",
5460
"256": "icons/icon-256.png"
61+
},
62+
63+
"action": {
64+
"default_title": "Clip to OneNote",
65+
"default_icon": {
66+
"19": "icons/icon-19.png",
67+
"38": "icons/icon-38.png"
68+
}
5569
}
5670
}

‎src/scripts/extensions/offscreen.html

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
<!DOCTYPE html>
2+
<script src="offscreen.js"></script>

‎src/scripts/extensions/chrome/chromeOffscreen.ts renamed to ‎src/scripts/extensions/offscreen.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {OffscreenMessageTypes} from "../../communicator/offscreenMessageTypes";
1+
import {OffscreenMessageTypes} from "../communicator/offscreenMessageTypes";
22

33
// Registering this listener when the script is first executed ensures that the
44
// offscreen document will be able to receive messages when the promise returned

0 commit comments

Comments
 (0)