⏳👷 Parsing Service Worker Script…
11 |
12 |
13 |
14 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/popup.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2017 Google Inc. All rights reserved.
3 | *
4 | * Licensed under the Apache License, Version 2.0 (the "License");
5 | * you may not use this file except in compliance with the License.
6 | * You may obtain a copy of the License at
7 | *
8 | * http://www.apache.org/licenses/LICENSE-2.0
9 | *
10 | * Unless required by applicable law or agreed to in writing, software
11 | * distributed under the License is distributed on an "AS IS" BASIS,
12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | * See the License for the specific language governing permissions and
14 | * limitations under the License.
15 | */
16 |
17 | window.browser = window.browser || window.chrome;
18 |
19 | const beautifyCode = (source) => {
20 | const beautified = window.beautifier.js(source, {
21 | indent_size: 2,
22 | no_preserve_newlines: true,
23 | wrap_line_length: 80,
24 | end_with_newline: true,
25 | });
26 | return Prism.highlight(beautified, Prism.languages.javascript);
27 | };
28 |
29 | const parseManifest = (manifest, baseUrl) => {
30 | const clusters = [
31 | {
32 | name: "Identity",
33 | members: [
34 | { key: "name", name: "Name" },
35 | { key: "short_name", name: "Short Name" },
36 | { key: "description", name: "Description" },
37 | ],
38 | },
39 | {
40 | name: "Presentation",
41 | members: [
42 | { key: "start_url", name: "Start URL" },
43 | { key: "scope", name: "Scope" },
44 | { key: "theme_color", name: "Theme Color" },
45 | { key: "background_color", name: "Background Color" },
46 | { key: "orientation", name: "Orientation" },
47 | { key: "display", name: "Display" },
48 | { key: "lang", name: "Language" },
49 | { key: "dir", name: "Direction" },
50 | { key: "iarc_rating_id", name: "IARC Rating ID" },
51 | { key: "categories", name: "Categories" },
52 | ],
53 | },
54 | {
55 | name: "Icons",
56 | members: [{ key: "icons", name: "Icons" }],
57 | },
58 | {
59 | name: "Screenshots",
60 | members: [{ key: "screenshots", name: "Screenshots" }],
61 | },
62 | {
63 | name: "Related Applications",
64 | members: [
65 | {
66 | key: "prefer_related_applications",
67 | name: "Prefer Related Applications",
68 | },
69 | {
70 | key: "related_applications",
71 | name: "Related Applications",
72 | submembers: [
73 | { key: "min_version", name: "Minimum Version" },
74 | { key: "fingerprints", name: "Fingerprints" },
75 | ],
76 | },
77 | ],
78 | },
79 | {
80 | name: "Google Cloud Messaging (GCM)",
81 | members: [
82 | { key: "gcm_sender_id", name: "GCM Sender ID" },
83 | { key: "gcm_user_visible_only", name: "GCM User Visible Only" },
84 | ],
85 | },
86 | {
87 | name: "Web Share",
88 | members: [
89 | { key: "share_target", name: "Share Target" },
90 | { key: "supports_share", name: "Supports Share" },
91 | ],
92 | },
93 | {
94 | name: "Service Worker",
95 | members: [
96 | {
97 | key: "serviceworker",
98 | name: "Service Worker",
99 | submembers: [
100 | { key: "src", name: "Source" },
101 | { key: "scope", name: "Scope" },
102 | { key: "type", name: "Type" },
103 | { key: "use_cache", name: "Use Cache" },
104 | ],
105 | },
106 | ],
107 | },
108 | ];
109 |
110 | // Helper function to get absolute URLs
111 | const absoluteUrl = (urlString) => {
112 | if (!urlString) {
113 | return false;
114 | }
115 | let url;
116 | try {
117 | url = new URL(urlString, baseUrl);
118 | } catch (e) {
119 | return false;
120 | }
121 | return url.toString();
122 | };
123 |
124 | // Helper function to get SVG
125 | const getRect = (fill) => {
126 | return `
127 | `;
132 | };
133 |
134 | let lastSize;
135 | const manifestHtml = [];
136 | clusters.forEach((cluster) => {
137 | manifestHtml.push(`
138 |
264 |
265 | ${submember.name}:
266 | ${
267 | submember.key === "fingerprints"
268 | ? values[submember.key]
269 | .map((fingerprint) => {
270 | return `
271 |
`;
281 | }
282 | })
283 | .join("")}
284 |
272 |
`;
275 | })
276 | .join("")
277 | : values[submember.key]
278 | }
279 |
280 | ${fingerprint.value}
273 | (${fingerprint.type})
274 | ${beautifyCode(
312 | JSON.stringify(manifest[keyId]),
313 | )}$2${importedScriptUrl}$2
${code}
398 |
400 |
401 |
463 |
`;
464 | };
465 |
466 | const getManifestHtml = (result, baseUrl) => {
467 | return `
468 | 👷 Service Worker
399 || State | 403 |Scope | 404 |Script URL | 405 |Events | 406 |
|---|---|---|---|
| ${ 411 | result.state === "activated" 412 | ? `\u2705\u00A0\u00A0${state}` 413 | : `\u274C\u00A0\u00A0${state}` 414 | } 415 | | 416 |417 | 418 | ${relativeScopeUrl} 419 | 420 | | 421 |422 | 423 | ${relativeScriptUrl} 424 | 425 | | 426 |
427 |
|
440 |
| 445 | Service Worker Code (beautified) 446 | 447 | 453 | 454 | | 455 ||||
458 | |
460 | |||
469 |
471 |
472 |
487 |
`;
488 | };
489 |
490 | const getCacheHtml = (cacheContents) => {
491 | let html = `
492 | 📃 Web Manifest
470 || Manifest URL | 474 ||
|---|---|
| 479 | 480 | ${result.manifestUrl} 481 | 482 | | 483 |
493 |
`;
625 | return html;
626 | };
627 |
628 | const renderHtml = (state, scope, relativeScriptUrl, result) => {
629 | result.events = Object.keys(result.events);
630 | let html = getServiceWorkerHtml(state, scope, relativeScriptUrl, result);
631 | if (result.manifest) {
632 | const baseUrl = result.manifestUrl.substring(
633 | 0,
634 | result.manifestUrl.lastIndexOf("/") + 1,
635 | );
636 | html += getManifestHtml(result, baseUrl);
637 | }
638 | if (result.cacheContents && Object.keys(result.cacheContents).length) {
639 | html += getCacheHtml(result.cacheContents);
640 | }
641 | const container = document.querySelector("#container");
642 | container.innerHTML = html;
643 |
644 | // Allow changing the font size
645 | const fontSize = document.querySelector("#font-size");
646 | const pre = document.querySelector("#sw-code");
647 | fontSize.addEventListener("input", (inputEvent) => {
648 | pre.style.fontSize = `${parseInt(fontSize.value, 10) / 100}rem`;
649 | });
650 |
651 | // Highlight the Service Worker events in the code
652 | const events = document.querySelector("#events");
653 | const code = pre.querySelector("code");
654 | events.addEventListener("click", (clickEvent) => {
655 | const target = clickEvent.target;
656 | let input;
657 | if (target.nodeName === "LABEL") {
658 | input = events.querySelector(`#${target.getAttribute("for")}`);
659 | } else if (target.nodeName === "INPUT") {
660 | input = target;
661 | } else {
662 | return;
663 | }
664 | // Find addEventlistener('$event') style events
665 | const tokenStrings = code.querySelectorAll(
666 | "span.token.string",
667 | "span.token.string.highlight",
668 | );
669 | tokenStrings.forEach((tokenString) => {
670 | if (
671 | tokenString.textContent !== `'${input.id}'` &&
672 | tokenString.textContent !== `"${input.id}"`
673 | ) {
674 | return;
675 | }
676 | if (input.checked) {
677 | tokenString.classList.add("highlight");
678 | tokenString.scrollIntoViewIfNeeded();
679 | } else {
680 | tokenString.classList.remove("highlight");
681 | }
682 | });
683 | // Find on$Event style events
684 | const walker = document.createTreeWalker(
685 | code,
686 | NodeFilter.SHOW_TEXT,
687 | null,
688 | false,
689 | );
690 | let node;
691 | while ((node = walker.nextNode())) {
692 | if (new RegExp(`on${input.id}`).test(node.textContent.trim())) {
693 | const previousSibling = node.previousSibling;
694 | const nextSibling = node.nextSibling;
695 | if (input.checked) {
696 | previousSibling.classList.add("highlight");
697 | nextSibling.classList.add("highlight");
698 | previousSibling.scrollIntoViewIfNeeded();
699 | } else {
700 | previousSibling.classList.remove("highlight");
701 | nextSibling.classList.remove("highlight");
702 | }
703 | return;
704 | }
705 | }
706 | });
707 | };
708 |
709 | browser.tabs.query({ active: true, currentWindow: true }, (tabs) => {
710 | const currentTab = tabs[0];
711 | browser.tabs.sendMessage(
712 | currentTab.id,
713 | { type: "getServiceWorker" },
714 | (result) => {
715 | if (!result.scriptUrl || !result.state) {
716 | return;
717 | }
718 | const scriptUrl = new URL(result.scriptUrl);
719 | const relativeScriptUrl = `${scriptUrl.pathname}${scriptUrl.search}`;
720 | const scopeUrl = new URL(result.scope);
721 | const relativeScopeUrl = `${scopeUrl.pathname}${scopeUrl.search}`;
722 | const state =
723 | result.state.charAt(0).toUpperCase() + result.state.slice(1);
724 | // Find importScripts statements
725 | let importedScriptsPromises = [];
726 | const importedScriptsUrls = [];
727 | result.events = {};
728 | try {
729 | esprima.parse(result.source, {}, (node) => {
730 | if (
731 | (node.type === "CallExpression" &&
732 | node.callee.type === "Identifier" &&
733 | node.callee.name === "importScripts" &&
734 | node.arguments &&
735 | Array.isArray(node.arguments)) ||
736 | (node.type === "CallExpression" &&
737 | node.callee.type === "MemberExpression" &&
738 | node.callee.object.type === "Identifier" &&
739 | node.callee.object.name === "self" &&
740 | node.callee.property.type === "Identifier" &&
741 | node.callee.property.name === "importScripts")
742 | ) {
743 | importedScriptsPromises = importedScriptsPromises.concat(
744 | node.arguments.map((arg) => {
745 | // This means ```importScripts(variable)``` rather than
746 | // ```importScripts('https://example.org/sw.js')```
747 | if (arg.type !== "Literal") {
748 | return Promise.resolve("");
749 | }
750 | const importedScriptsUrl = arg.value.replace(/\\\//g, "/");
751 | importedScriptsUrls.push(importedScriptsUrl);
752 | return (
753 | fetch(new URL(importedScriptsUrl, result.scriptUrl), {
754 | credentials: "include",
755 | })
756 | .then((response) => {
757 | if (response.ok) {
758 | return response.text();
759 | }
760 | throw Error(`Couldn't load ${arg.value}`);
761 | })
762 | // Fail gracefully if the linked script can't be loaded
763 | .catch((e) => "")
764 | );
765 | }),
766 | );
767 | }
768 | });
769 | } catch (parseError) {
770 | result.source = JSON.stringify(parseError, null, 2);
771 | return renderHtml(state, relativeScopeUrl, relativeScriptUrl, result);
772 | }
773 | Promise.all(importedScriptsPromises)
774 | .then((importedScriptsSources) => {
775 | const importedScripts = {};
776 | importedScriptsSources.map((script, i) => {
777 | // Make sure trailing source map comments don't cause issues
778 | importedScripts[
779 | importedScriptsUrls[i]
780 | ] = `${importedScriptsSources[i]}\n`;
781 | });
782 | result.importedScripts = importedScripts;
783 | return result;
784 | })
785 | .then(() => {
786 | // Some events may be hidden in imported scripts, so analyze them, too
787 | const jointSources =
788 | Object.keys(result.importedScripts)
789 | .map((url) => {
790 | return result.importedScripts[url];
791 | })
792 | .join("\n") + result.source;
793 | try {
794 | esprima.parse(jointSources, {}, (node) => {
795 | // Find addEventlistener('$event') style events
796 | if (
797 | node.type === "CallExpression" &&
798 | node.callee.type === "MemberExpression" &&
799 | node.callee.property.name === "addEventListener" &&
800 | node.arguments &&
801 | Array.isArray(node.arguments) &&
802 | node.arguments.length &&
803 | node.arguments[0].type === "Literal"
804 | ) {
805 | result.events[node.arguments[0].value] = true;
806 | // Find on$Event style events
807 | } else if (
808 | node.type === "ExpressionStatement" &&
809 | node.expression.type === "AssignmentExpression" &&
810 | node.expression.left.type === "MemberExpression" &&
811 | node.expression.left.object.name === "self" &&
812 | node.expression.left.property.type === "Identifier" &&
813 | /^on/.test(node.expression.left.property.name)
814 | ) {
815 | const event = node.expression.left.property.name.replace(
816 | /^on/,
817 | "",
818 | );
819 | result.events[event] = true;
820 | }
821 | });
822 | } catch (parseError) {
823 | result.source = JSON.stringify(parseError, null, 2);
824 | return renderHtml(
825 | state,
826 | relativeScopeUrl,
827 | relativeScriptUrl,
828 | result,
829 | );
830 | }
831 | return renderHtml(state, relativeScopeUrl, relativeScriptUrl, result);
832 | });
833 | },
834 | );
835 | });
836 |
--------------------------------------------------------------------------------
/store_assets/edge-screenshot-cachestorage.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/google/service-worker-detector/f436412552de47d3faa5f25f7fabb428504d5a74/store_assets/edge-screenshot-cachestorage.png
--------------------------------------------------------------------------------
/store_assets/edge-screenshot-manifest.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/google/service-worker-detector/f436412552de47d3faa5f25f7fabb428504d5a74/store_assets/edge-screenshot-manifest.png
--------------------------------------------------------------------------------
/store_assets/edge-screenshot-serviceworker.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/google/service-worker-detector/f436412552de47d3faa5f25f7fabb428504d5a74/store_assets/edge-screenshot-serviceworker.png
--------------------------------------------------------------------------------
/store_assets/firefox-screenshot-cachestorage.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/google/service-worker-detector/f436412552de47d3faa5f25f7fabb428504d5a74/store_assets/firefox-screenshot-cachestorage.png
--------------------------------------------------------------------------------
/store_assets/firefox-screenshot-manifest.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/google/service-worker-detector/f436412552de47d3faa5f25f7fabb428504d5a74/store_assets/firefox-screenshot-manifest.png
--------------------------------------------------------------------------------
/store_assets/firefox-screenshot-sericeworker.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/google/service-worker-detector/f436412552de47d3faa5f25f7fabb428504d5a74/store_assets/firefox-screenshot-sericeworker.png
--------------------------------------------------------------------------------
/store_assets/screenshot-cachestorage.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/google/service-worker-detector/f436412552de47d3faa5f25f7fabb428504d5a74/store_assets/screenshot-cachestorage.png
--------------------------------------------------------------------------------
/store_assets/screenshot-manifest.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/google/service-worker-detector/f436412552de47d3faa5f25f7fabb428504d5a74/store_assets/screenshot-manifest.png
--------------------------------------------------------------------------------
/store_assets/screenshot-serviceworker.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/google/service-worker-detector/f436412552de47d3faa5f25f7fabb428504d5a74/store_assets/screenshot-serviceworker.png
--------------------------------------------------------------------------------
🛢 Cache Storage
494 |`;
495 | const columnNames = ["mime", "method", "url", "type"];
496 | let first = true;
497 | for (const cacheName in cacheContents) {
498 | if (!cacheContents.hasOwnProperty(cacheName)) {
499 | continue;
500 | }
501 | html += `
502 |
503 | Cache
504 | "
506 |
624 | Cache
504 | "${cacheName}"
505 |
506 |
507 |
508 |
509 |
618 |
619 | `;
620 | first = false;
621 | }
622 | html += `
623 | | ${ 513 | columnName === "url" || columnName === "mime" 514 | ? columnName.toUpperCase() 515 | : columnName.charAt(0).toUpperCase() + 516 | columnName.slice(1) 517 | } 518 | | `; 519 | }) 520 | .join("\n")} 521 ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| 543 | ${url} 544 | | `; 545 | } else if (columnName === "mime") { 546 | if (/^image\//.test(contentType)) { 547 | return ` 548 |
549 |
550 | | `;
555 | } else if (/^text\/css$/.test(contentType)) {
556 | return `
557 | 558 | 🖌 559 | | `; 560 | } else if (/^audio\//.test(contentType)) { 561 | return ` 562 |563 | 🔈 564 | | `; 565 | } else if (/^video\//.test(contentType)) { 566 | return ` 567 |568 | 📹 569 | | `; 570 | } else if (/\/.*?javascript/.test(contentType)) { 571 | return ` 572 |573 | 📝 574 | | `; 575 | } else if (/^text\/html/.test(contentType)) { 576 | return ` 577 |578 | 📄 579 | | `; 580 | } else if ( 581 | /^application\/.*?font/.test(contentType) 582 | ) { 583 | return ` 584 |585 | 🔡 586 | | `; 587 | } else if (/\/json/.test(contentType)) { 588 | return ` 589 |590 | 🔖 591 | | `; 592 | } else if ( 593 | /application\/manifest\+json/.test(contentType) 594 | ) { 595 | return ` 596 |597 | 📃 598 | | `; 599 | } else { 600 | return ` 601 |602 | ❓ 603 | | `; 604 | } 605 | } else { 606 | return ` 607 |608 | ${cacheEntry[columnName]} 609 | | `; 610 | } 611 | }) 612 | .join("\n")} 613 |