├── public
    └── favicon.png
├── src
    ├── assets
    │   ├── ChromeLabsLogo.png
    │   ├── main.css
    │   └── base.css
    ├── App.vue
    ├── components
    │   ├── icons
    │   │   └── IconExtension.vue
    │   ├── LandingDescription.vue
    │   ├── MatchedRuleBox.vue
    │   ├── FileUploadHeading.vue
    │   ├── OverlayCard.vue
    │   ├── RequestInput.vue
    │   ├── JSONRulesEditor.vue
    │   └── ExtensionUploadArea.vue
    ├── main.js
    ├── router
    │   └── index.js
    ├── views
    │   ├── RulesEditorView.vue
    │   ├── RequestsPlaygroundView.vue
    │   └── HomeView.vue
    ├── utils.js
    └── stores
    │   ├── urlFilterStore.js
    │   ├── manifestStore.js
    │   └── rulesStore.js
├── .gitignore
├── jsconfig.json
├── .prettierrc.json
├── .github
    ├── ISSUE_TEMPLATE.md
    └── PULL_REQUEST_TEMPLATE.md
├── .eslintrc.cjs
├── vite.config.js
├── index.html
├── package.json
├── docs
    ├── contributing.md
    └── code-of-conduct.md
├── README.md
└── LICENSE


/public/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoogleChromeLabs/interactive-dnr-tool/main/public/favicon.png


--------------------------------------------------------------------------------
/src/assets/ChromeLabsLogo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GoogleChromeLabs/interactive-dnr-tool/main/src/assets/ChromeLabsLogo.png


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | *~
2 | *.DS_store
3 | node_modules
4 | # Temporary directory for debugging extension samples
5 | _debug
6 | _metadata
7 | .vscode


--------------------------------------------------------------------------------
/jsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "compilerOptions": {
3 |     "paths": {
4 |       "@/*": ["./src/*"]
5 |     }
6 |   },
7 |   "exclude": ["node_modules", "dist"]
8 | }
9 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | import { RouterView } from 'vue-router';
 3 | </script>
 4 | 
 5 | <template>
 6 |   <RouterView />
 7 | </template>
 8 | 
 9 | <style scoped></style>
10 | 


--------------------------------------------------------------------------------
/src/components/icons/IconExtension.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <img
3 |     src="../../assets/ChromeLabsLogo.png"
4 |     alt="ExtensionIcon"
5 |     height="24"
6 |     width="24"
7 |   />
8 | </template>
9 | 


--------------------------------------------------------------------------------
/.prettierrc.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "printWidth": 80,
 3 |   "tabWidth": 2,
 4 |   "semi": true,
 5 |   "singleQuote": true,
 6 |   "trailingComma": "none",
 7 |   "bracketSpacing": true,
 8 |   "arrowParens": "always"
 9 | }
10 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE.md:
--------------------------------------------------------------------------------
 1 | ## Expected Behavior
 2 | 
 3 | 
 4 | ## Actual Behavior
 5 | 
 6 | 
 7 | ## Steps to Reproduce the Problem
 8 | 
 9 | 1.
10 | 1.
11 | 1.
12 | 
13 | ## Specifications
14 | 
15 | - Version:
16 | - Platform:


--------------------------------------------------------------------------------
/.github/PULL_REQUEST_TEMPLATE.md:
--------------------------------------------------------------------------------
1 | Fixes #<issue_number_goes_here>
2 | 
3 | > It's a good idea to open an issue first for discussion.
4 | 
5 | - [ ] Tests pass
6 | - [ ] Appropriate changes to documentation are included in the PR
7 | 


--------------------------------------------------------------------------------
/.eslintrc.cjs:
--------------------------------------------------------------------------------
 1 | /* eslint-env node */
 2 | require('@rushstack/eslint-patch/modern-module-resolution')
 3 | 
 4 | module.exports = {
 5 |   root: true,
 6 |   extends: [
 7 |     'plugin:vue/vue3-essential',
 8 |     'eslint:recommended',
 9 |     '@vue/eslint-config-prettier/skip-formatting'
10 |   ],
11 |   parserOptions: {
12 |     ecmaVersion: 'latest'
13 |   }
14 | }
15 | 


--------------------------------------------------------------------------------
/vite.config.js:
--------------------------------------------------------------------------------
 1 | import { fileURLToPath, URL } from 'node:url'
 2 | 
 3 | import { defineConfig } from 'vite'
 4 | import vue from '@vitejs/plugin-vue'
 5 | 
 6 | // https://vitejs.dev/config/
 7 | export default defineConfig({
 8 |   plugins: [
 9 |     vue(),
10 |   ],
11 |   resolve: {
12 |     alias: {
13 |       '@': fileURLToPath(new URL('./src', import.meta.url))
14 |     }
15 |   }
16 | })
17 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link rel="icon" href="public/favicon.png" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Interactive DNR Tool</title>
 8 |   </head>
 9 |   <body>
10 |     <div id="app" style="width: 100%"></div>
11 |     <script type="module" src="/src/main.js"></script>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import './assets/main.css';
 2 | 
 3 | import { createApp } from 'vue';
 4 | import { createPinia } from 'pinia';
 5 | import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
 6 | 
 7 | import App from './App.vue';
 8 | import router from './router';
 9 | 
10 | const app = createApp(App);
11 | 
12 | const pinia = createPinia();
13 | pinia.use(piniaPluginPersistedstate);
14 | 
15 | app.use(pinia);
16 | app.use(router);
17 | 
18 | app.mount('#app');
19 | 


--------------------------------------------------------------------------------
/src/assets/main.css:
--------------------------------------------------------------------------------
 1 | @import './base.css';
 2 | 
 3 | #app {
 4 |   max-width: 1280px;
 5 |   margin: 0 auto;
 6 |   padding: 2rem;
 7 |   font-weight: normal;
 8 | }
 9 | 
10 | a,
11 | .green {
12 |   text-decoration: none;
13 |   color: hsla(160, 100%, 37%, 1);
14 |   transition: 0.4s;
15 |   padding: 3px;
16 | }
17 | 
18 | @media (hover: hover) {
19 |   a:hover {
20 |     background-color: hsla(160, 100%, 37%, 0.2);
21 |   }
22 | }
23 | 
24 | @media (min-width: 1024px) {
25 |   body {
26 |     display: flex;
27 |     place-items: center;
28 |   }
29 | 
30 |   #app {
31 |     display: grid;
32 |     grid-template-columns: 1fr 1fr;
33 |     padding: 0 2rem;
34 |   }
35 | }
36 | 


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import { createRouter, createWebHistory } from 'vue-router';
 2 | 
 3 | const router = createRouter({
 4 |   history: createWebHistory(import.meta.env.BASE_URL),
 5 |   routes: [
 6 |     {
 7 |       path: '/',
 8 |       name: 'home',
 9 |       component: () => import('../views/HomeView.vue')
10 |     },
11 |     {
12 |       path: '/requests',
13 |       name: 'requests',
14 |       component: () => import('../views/RequestsPlaygroundView.vue')
15 |     },
16 |     {
17 |       path: '/rules',
18 |       name: 'rules',
19 |       component: () => import('../views/RulesEditorView.vue')
20 |     }
21 |   ]
22 | });
23 | 
24 | export default router;
25 | 


--------------------------------------------------------------------------------
/src/components/LandingDescription.vue:
--------------------------------------------------------------------------------
 1 | <script setup></script>
 2 | 
 3 | <template>
 4 |   <div class="greetings">
 5 |     <h1>Interactive DNR Tool</h1>
 6 |     <h3>Visualise and edit your extension's declarative network rules intuitively.</h3>
 7 |   </div>
 8 | </template>
 9 | 
10 | <style scoped>
11 | h1 {
12 |   font-weight: 500;
13 |   font-size: 2rem;
14 |   position: relative;
15 |   top: -10px;
16 | }
17 | 
18 | h3 {
19 |   font-size: 1.2rem;
20 | }
21 | 
22 | .greetings h1,
23 | .greetings h3 {
24 |   text-align: center;
25 | }
26 | 
27 | @media (min-width: 1024px) {
28 |   .greetings h1,
29 |   .greetings h3 {
30 |     text-align: left;
31 |   }
32 | }
33 | </style>
34 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "interactive-dnr-tool",
 3 |   "version": "0.0.0",
 4 |   "private": true,
 5 |   "type": "module",
 6 |   "scripts": {
 7 |     "dev": "vite",
 8 |     "build": "vite build",
 9 |     "preview": "vite preview",
10 |     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
11 |     "format": "prettier --write src/"
12 |   },
13 |   "dependencies": {
14 |     "jsoneditor": "^10.1.0",
15 |     "pinia": "^2.1.7",
16 |     "pinia-plugin-persistedstate": "^3.2.1",
17 |     "vue": "^3.4.29",
18 |     "vue-router": "^4.3.3"
19 |   },
20 |   "devDependencies": {
21 |     "@vitejs/plugin-vue": "^5.0.5",
22 |     "@vue/eslint-config-prettier": "^9.0.0",
23 |     "eslint": "^8.57.0",
24 |     "eslint-plugin-vue": "^9.23.0",
25 |     "prettier": "^3.2.5",
26 |     "vite": "^5.4.6"
27 |   }
28 | }
29 | 


--------------------------------------------------------------------------------
/src/components/MatchedRuleBox.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | import { computed } from 'vue';
 3 | import { useRulesStore } from '../stores/rulesStore';
 4 | const rulesStore = useRulesStore();
 5 | let matchedRuleString = computed(() => rulesStore.getMatchedRuleString);
 6 | </script>
 7 | 
 8 | <template>
 9 |   <div class="matched-rule-container">
10 |     <pre>{{ matchedRuleString }}</pre>
11 |   </div>
12 | </template>
13 | 
14 | <style scoped>
15 | .matched-rule-container {
16 |   display: flex;
17 |   align-items: center;
18 |   height: 200px;
19 |   position: relative;
20 | }
21 | .box {
22 |   width: 100%;
23 |   height: 100%;
24 |   background-color: gray;
25 |   margin: 0 auto;
26 |   position: relative;
27 |   padding: 10px;
28 |   border: 1px solid #ccc;
29 |   border-radius: 4px;
30 |   overflow: auto;
31 |   white-space: pre-wrap;
32 |   display: flex;
33 | }
34 | 
35 | pre {
36 |   width: 100%;
37 |   height: 100%;
38 |   margin: 0;
39 |   font-family: monospace;
40 |   color: white;
41 | }
42 | 
43 | @media (prefers-color-scheme: light) {
44 |   pre {
45 |     width: 100%;
46 |     height: 100%;
47 |     margin: 0;
48 |     font-family: monospace;
49 |     color: black;
50 |   }
51 | }
52 | </style>
53 | 


--------------------------------------------------------------------------------
/docs/contributing.md:
--------------------------------------------------------------------------------
 1 | # How to Contribute
 2 | 
 3 | We would love to accept your patches and contributions to this project.
 4 | 
 5 | ## Before you begin
 6 | 
 7 | ### Sign our Contributor License Agreement
 8 | 
 9 | Contributions to this project must be accompanied by a
10 | [Contributor License Agreement](https://cla.developers.google.com/about) (CLA).
11 | You (or your employer) retain the copyright to your contribution; this simply
12 | gives us permission to use and redistribute your contributions as part of the
13 | project.
14 | 
15 | If you or your current employer have already signed the Google CLA (even if it
16 | was for a different project), you probably don't need to do it again.
17 | 
18 | Visit <https://cla.developers.google.com/> to see your current agreements or to
19 | sign a new one.
20 | 
21 | ### Review our Community Guidelines
22 | 
23 | This project follows [Google's Open Source Community
24 | Guidelines](https://opensource.google/conduct/).
25 | 
26 | ## Contribution process
27 | 
28 | ### Code Reviews
29 | 
30 | All submissions, including submissions by project members, require review. We
31 | use [GitHub pull requests](https://docs.github.com/articles/about-pull-requests)
32 | for this purpose.
33 | 


--------------------------------------------------------------------------------
/src/views/RulesEditorView.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | import { useRouter } from 'vue-router';
 3 | import 'jsoneditor/dist/jsoneditor.css';
 4 | import JSONRulesEditor from '@/components/JSONRulesEditor.vue';
 5 | import { useRulesStore } from '@/stores/rulesStore';
 6 | import { onMounted } from 'vue';
 7 | 
 8 | const rulesStore = useRulesStore();
 9 | const parsedRulesList = rulesStore.getParsedRulesListLength;
10 | 
11 | const router = useRouter();
12 | onMounted(() => {
13 |   if (parsedRulesList === 0) {
14 |     let result = confirm(
15 |       '0 parsed rules found. Proceed to upload ruleset file(s)?'
16 |     );
17 |     if (result) {
18 |       router.push({ name: 'home' });
19 |     }
20 |   }
21 | });
22 | </script>
23 | 
24 | <template>
25 |   <main>
26 |     <h1>Rules Editor</h1>
27 |     <div class="wrapper">
28 |       <nav>
29 |         <RouterLink to="/">Home</RouterLink>
30 |         <RouterLink to="/requests">Requests Playground</RouterLink>
31 |       </nav>
32 |     </div>
33 |     <JSONRulesEditor />
34 |   </main>
35 | </template>
36 | 
37 | <style scoped>
38 | nav {
39 |   width: 100%;
40 |   font-size: 12px;
41 |   text-align: center;
42 |   margin-top: 2rem;
43 | }
44 | 
45 | nav a.router-link-exact-active {
46 |   color: var(--color-text);
47 | }
48 | 
49 | nav a.router-link-exact-active:hover {
50 |   background-color: transparent;
51 | }
52 | 
53 | nav a {
54 |   display: inline-block;
55 |   padding: 0 1rem;
56 |   border-left: 1px solid var(--color-border);
57 | }
58 | 
59 | nav a:first-of-type {
60 |   border: 0;
61 | }
62 | </style>
63 | 


--------------------------------------------------------------------------------
/src/components/FileUploadHeading.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="item">
 3 |     <i>
 4 |       <slot name="icon"></slot>
 5 |     </i>
 6 |     <div class="details">
 7 |       <h3>
 8 |         <slot name="heading"></slot>
 9 |       </h3>
10 |       <slot></slot>
11 |     </div>
12 |   </div>
13 | </template>
14 | 
15 | <style scoped>
16 | .item {
17 |   margin-top: 2rem;
18 |   display: flex;
19 |   position: relative;
20 | }
21 | 
22 | .details {
23 |   flex: 1;
24 |   margin-left: 1rem;
25 | }
26 | 
27 | i {
28 |   display: flex;
29 |   place-items: center;
30 |   place-content: center;
31 |   width: 32px;
32 |   height: 32px;
33 |   color: var(--color-text);
34 | }
35 | 
36 | h3 {
37 |   font-size: 1.2rem;
38 |   font-weight: 500;
39 |   margin-bottom: 0.4rem;
40 |   color: var(--color-heading);
41 | }
42 | 
43 | @media (min-width: 1024px) {
44 |   .item {
45 |     margin-top: 0;
46 |     padding: 0.4rem 0 1rem calc(var(--section-gap) / 2);
47 |   }
48 | 
49 |   i {
50 |     top: calc(50% - 25px);
51 |     left: -26px;
52 |     position: absolute;
53 |     border: 1px solid var(--color-border);
54 |     background: var(--color-background);
55 |     border-radius: 8px;
56 |     width: 50px;
57 |     height: 50px;
58 |   }
59 | 
60 |   .item:before {
61 |     content: ' ';
62 |     border-left: 1px solid var(--color-border);
63 |     position: absolute;
64 |     left: 0;
65 |     bottom: calc(50% + 25px);
66 |     height: calc(50% - 25px);
67 |   }
68 | 
69 |   .item:after {
70 |     content: ' ';
71 |     border-left: 1px solid var(--color-border);
72 |     position: absolute;
73 |     left: 0;
74 |     top: calc(50% + 25px);
75 |     height: calc(50% - 25px);
76 |   }
77 | 
78 |   .item:first-of-type:before {
79 |     display: none;
80 |   }
81 | 
82 |   .item:last-of-type:after {
83 |     display: none;
84 |   }
85 | }
86 | </style>
87 | 


--------------------------------------------------------------------------------
/src/views/RequestsPlaygroundView.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | import { useRouter } from 'vue-router';
 3 | import { useRulesStore } from '@/stores/rulesStore';
 4 | import { computed, onMounted } from 'vue';
 5 | import RequestInput from '@/components/RequestInput.vue';
 6 | import MatchedRuleBox from '@/components/MatchedRuleBox.vue';
 7 | 
 8 | const rulesStore = useRulesStore();
 9 | const router = useRouter();
10 | const parsedRulesList = rulesStore.getParsedRulesListLength;
11 | let matchedRuleString = computed(() => rulesStore.getMatchedRuleString);
12 | onMounted(() => {
13 |   if (parsedRulesList === 0) {
14 |     let result = confirm(
15 |       '0 parsed rules found. Proceed to upload ruleset file(s)?'
16 |     );
17 |     if (result) {
18 |       router.push({ name: 'home' });
19 |     }
20 |   }
21 | });
22 | </script>
23 | 
24 | <template>
25 |   <main>
26 |     <h1>Requests Playground</h1>
27 |     <div class="wrapper">
28 |       <nav>
29 |         <RouterLink to="/">Home</RouterLink>
30 |         <RouterLink to="/rules">Rules Editor</RouterLink>
31 |       </nav>
32 |     </div>
33 |     <div class="flexbox">
34 |       <div><RequestInput :parsed-rules="parsedRulesList" /></div>
35 |       <div><MatchedRuleBox v-if="matchedRuleString" /></div>
36 |     </div>
37 |   </main>
38 | </template>
39 | 
40 | <style scoped>
41 | nav {
42 |   width: 100%;
43 |   font-size: 12px;
44 |   text-align: center;
45 |   margin-top: 2rem;
46 | }
47 | 
48 | nav a.router-link-exact-active {
49 |   color: var(--color-text);
50 | }
51 | 
52 | nav a.router-link-exact-active:hover {
53 |   background-color: transparent;
54 | }
55 | 
56 | nav a {
57 |   display: inline-block;
58 |   padding: 0 1rem;
59 |   border-left: 1px solid var(--color-border);
60 | }
61 | 
62 | nav a:first-of-type {
63 |   border: 0;
64 | }
65 | 
66 | .flexbox {
67 |   display: flex;
68 |   justify-content: space-between;
69 |   align-items: right;
70 |   margin-top: 2rem;
71 | }
72 | </style>
73 | 


--------------------------------------------------------------------------------
/src/assets/base.css:
--------------------------------------------------------------------------------
 1 | /* color palette from <https://github.com/vuejs/theme> */
 2 | :root {
 3 |   --vt-c-white: #ffffff;
 4 |   --vt-c-white-soft: #f8f8f8;
 5 |   --vt-c-white-mute: #f2f2f2;
 6 | 
 7 |   --vt-c-black: #181818;
 8 |   --vt-c-black-soft: #222222;
 9 |   --vt-c-black-mute: #282828;
10 | 
11 |   --vt-c-indigo: #2c3e50;
12 | 
13 |   --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
14 |   --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
15 |   --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
16 |   --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
17 | 
18 |   --vt-c-text-light-1: var(--vt-c-indigo);
19 |   --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
20 |   --vt-c-text-dark-1: var(--vt-c-white);
21 |   --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
22 | }
23 | 
24 | /* semantic color variables for this project */
25 | :root {
26 |   --color-background: var(--vt-c-white);
27 |   --color-background-soft: var(--vt-c-white-soft);
28 |   --color-background-mute: var(--vt-c-white-mute);
29 | 
30 |   --color-border: var(--vt-c-divider-light-2);
31 |   --color-border-hover: var(--vt-c-divider-light-1);
32 | 
33 |   --color-heading: var(--vt-c-text-light-1);
34 |   --color-text: var(--vt-c-text-light-1);
35 | 
36 |   --section-gap: 160px;
37 | }
38 | 
39 | @media (prefers-color-scheme: dark) {
40 |   :root {
41 |     --color-background: var(--vt-c-black);
42 |     --color-background-soft: var(--vt-c-black-soft);
43 |     --color-background-mute: var(--vt-c-black-mute);
44 | 
45 |     --color-border: var(--vt-c-divider-dark-2);
46 |     --color-border-hover: var(--vt-c-divider-dark-1);
47 | 
48 |     --color-heading: var(--vt-c-text-dark-1);
49 |     --color-text: var(--vt-c-text-dark-2);
50 |   }
51 | }
52 | 
53 | *,
54 | *::before,
55 | *::after {
56 |   box-sizing: border-box;
57 |   margin: 0;
58 |   font-weight: normal;
59 | }
60 | 
61 | body {
62 |   min-height: 100vh;
63 |   color: var(--color-text);
64 |   background: var(--color-background);
65 |   transition:
66 |     color 0.5s,
67 |     background-color 0.5s;
68 |   line-height: 1.6;
69 |   font-family:
70 |     Inter,
71 |     -apple-system,
72 |     BlinkMacSystemFont,
73 |     'Segoe UI',
74 |     Roboto,
75 |     Oxygen,
76 |     Ubuntu,
77 |     Cantarell,
78 |     'Fira Sans',
79 |     'Droid Sans',
80 |     'Helvetica Neue',
81 |     sans-serif;
82 |   font-size: 15px;
83 |   text-rendering: optimizeLegibility;
84 |   -webkit-font-smoothing: antialiased;
85 |   -moz-osx-font-smoothing: grayscale;
86 | }
87 | 


--------------------------------------------------------------------------------
/src/components/OverlayCard.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | import { computed } from 'vue';
 3 | import { useManifestStore } from '@/stores/manifestStore';
 4 | const manifestStore = useManifestStore();
 5 | let isFirstVisit = computed(() => manifestStore.isFirstVisit);
 6 | function hideCard() {
 7 |   manifestStore.setIsFirstVisit(false);
 8 | }
 9 | </script>
10 | 
11 | <template>
12 |   <div>
13 |     <div v-if="isFirstVisit" class="overlay" @click="hideCard">
14 |       <div class="card" @click.stop>
15 |         <h3>Welcome to Interactive DNR Tool!</h3>
16 |         <p>
17 |           <br />
18 |           <strong>How to Use:</strong><br />
19 |           <strong>1. Upload Your Manifest File:</strong><br />
20 |           Click on the "Upload Manifest" section or drag and drop your
21 |           <code>manifest.json</code> file. Ensure that the file contains all
22 |           necessary fields.<br /><br />
23 | 
24 |           <strong>2. Upload Ruleset Files:</strong><br />
25 |           After uploading the manifest, proceed to upload one or more ruleset
26 |           files by clicking the "Upload Ruleset Files" section or by dragging
27 |           and dropping them. Files should be in JSON format and follow the
28 |           specified ruleset structure.<br /><br />
29 | 
30 |           <strong>3. Create HTTP Requests to find the matching rule:</strong
31 |           ><br />
32 |           Fill out the form and click submit to see the matching rule.<br /><br />
33 | 
34 |           <strong>4. Review and Modify Rules:</strong><br />
35 |           Once uploaded, your rules will be displayed in the rules editor. You
36 |           can review, modify, or delete rules directly within this editor.<br /><br />
37 |         </p>
38 |         <button @click="hideCard">Close</button>
39 |       </div>
40 |     </div>
41 |   </div>
42 | </template>
43 | 
44 | <style scoped>
45 | .overlay {
46 |   position: fixed;
47 |   top: 0;
48 |   left: 0;
49 |   width: 100%;
50 |   height: 100%;
51 |   background: rgba(0, 0, 0, 0.5);
52 |   display: flex;
53 |   align-items: center;
54 |   justify-content: center;
55 |   z-index: 1000;
56 | }
57 | .card {
58 |   background: white;
59 |   color: black;
60 |   padding: 20px;
61 |   border-radius: 10px;
62 |   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
63 |   z-index: 1001;
64 |   max-width: 50%;
65 |   text-align: left;
66 | }
67 | 
68 | button {
69 |   margin-top: 15px;
70 |   padding: 10px 20px;
71 |   background: #007bff;
72 |   color: #fff;
73 |   border: none;
74 |   border-radius: 5px;
75 |   cursor: pointer;
76 | }
77 | </style>
78 | 


--------------------------------------------------------------------------------
/src/components/RequestInput.vue:
--------------------------------------------------------------------------------
  1 | <script setup>
  2 | import { ref } from 'vue';
  3 | import { useRulesStore } from '../stores/rulesStore';
  4 | 
  5 | const rulesStore = useRulesStore();
  6 | 
  7 | const httpMethod = ref('GET');
  8 | const url = ref('');
  9 | const headers = ref('');
 10 | const body = ref('');
 11 | const matchedRule = ref(null);
 12 | let matchedRuleString = '';
 13 | 
 14 | function submitRequest(ev) {
 15 |   ev.preventDefault();
 16 | 
 17 |   // Headers validity checking
 18 |   let requestHeaders = {};
 19 |   try {
 20 |     requestHeaders = JSON.parse(headers.value || '{}');
 21 |   } catch (e) {
 22 |     window.alert('Invalid headers');
 23 |     headers.value = '';
 24 |     return;
 25 |   }
 26 | 
 27 |   const formObject = {
 28 |     httpMethod: httpMethod.value,
 29 |     url: url.value,
 30 |     headers: requestHeaders,
 31 |     body: body.value
 32 |   };
 33 |   matchedRule.value = rulesStore.requestMatcher(formObject)[0];
 34 |   // When matchedRule.value is undefined, it means no matching rule was found
 35 |   try {
 36 |     matchedRuleString = JSON.stringify(matchedRule.value.rule, null, 2);
 37 |   } catch (e) {
 38 |     window.alert('No matching rule found.');
 39 |   }
 40 |   rulesStore.setMatchedRuleString(matchedRuleString);
 41 | }
 42 | </script>
 43 | 
 44 | <template>
 45 |   <div>
 46 |     <form @submit.prevent="submitRequest">
 47 |       <div>
 48 |         <p>HTTP Method:</p>
 49 |         <select v-model="httpMethod" id="method">
 50 |           <option>GET</option>
 51 |           <option>POST</option>
 52 |           <option>PUT</option>
 53 |           <option>DELETE</option>
 54 |           <option>PATCH</option>
 55 |         </select>
 56 |       </div>
 57 |       <div>
 58 |         <p>Request URL:</p>
 59 |         <input type="url" v-model="url" id="httpRequestURL" required />
 60 |       </div>
 61 |       <div>
 62 |         <p>HTTP Headers:</p>
 63 |         <textarea
 64 |           v-model="headers"
 65 |           id="headers"
 66 |           value="HTTP Headers"
 67 |         ></textarea>
 68 |       </div>
 69 |       <div>
 70 |         <p>Body:</p>
 71 |         <textarea v-model="body" id="body" value="Body"></textarea>
 72 |       </div>
 73 |       <button type="submit">Submit Request</button>
 74 |     </form>
 75 |   </div>
 76 | </template>
 77 | 
 78 | <style scoped>
 79 | form {
 80 |   display: flex;
 81 |   flex-direction: column;
 82 | }
 83 | 
 84 | form > div {
 85 |   margin-bottom: 1rem;
 86 | }
 87 | 
 88 | label {
 89 |   margin-bottom: 0.5rem;
 90 | }
 91 | 
 92 | input,
 93 | select,
 94 | textarea,
 95 | button {
 96 |   padding: 0.5rem;
 97 |   font-size: 1rem;
 98 | }
 99 | </style>
100 | 


--------------------------------------------------------------------------------
/src/components/JSONRulesEditor.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | import JSONEditor from 'jsoneditor';
 3 | import 'jsoneditor/dist/jsoneditor.css';
 4 | 
 5 | import { ref, onBeforeUnmount } from 'vue';
 6 | import { useRulesStore } from '@/stores/rulesStore';
 7 | import { useManifestStore } from '@/stores/manifestStore';
 8 | 
 9 | const rulesStore = useRulesStore();
10 | const manifestStore = useManifestStore();
11 | 
12 | const rulesetFileName = defineModel();
13 | const fileNames = manifestStore.getRulesetFilePaths.map(
14 |   (rulesetFilePathObject) => rulesetFilePathObject.rulesetFilePath
15 | );
16 | 
17 | const jsonEditor = ref(null);
18 | const isEnabledRuleset = ref(false);
19 | let editor = null;
20 | 
21 | onBeforeUnmount(() => {
22 |   if (editor) {
23 |     editor.destroy();
24 |   }
25 | });
26 | 
27 | const loadFile = () => {
28 |   // rulesetFileName has been set from the drop-down by the user
29 |   const rulesetToEdit = rulesStore.getRuleset(rulesetFileName.value);
30 |   const rulesetFilePathObject = manifestStore.getRulesetFilePaths.find(
31 |     (rulesetFilePathObject) =>
32 |       rulesetFilePathObject.rulesetFileName === rulesetFileName.value
33 |   );
34 |   isEnabledRuleset.value = rulesetFilePathObject.isEnabled;
35 |   const container = jsonEditor.value;
36 |   const options = {
37 |     mode: 'code',
38 |     onChange: () => {
39 |       // pass
40 |     }
41 |   };
42 | 
43 |   if (editor) {
44 |     editor.destroy();
45 |   }
46 | 
47 |   editor = new JSONEditor(container, options);
48 |   editor.set(rulesetToEdit);
49 | };
50 | 
51 | const saveRuleset = () => {
52 |   try {
53 |     rulesStore.saveRuleset(rulesetFileName.value, editor.get());
54 |     window.alert('Saved changes to ' + rulesetFileName.value);
55 |   } catch (error) {
56 |     console.error(error);
57 |     window.alert('Error saving ruleset');
58 |   }
59 | };
60 | 
61 | const toggleAvailable = () => {
62 |   manifestStore.toggleRulesetAvailability(rulesetFileName.value);
63 |   rulesStore.toggleRulesAvailability(rulesetFileName.value);
64 |   isEnabledRuleset.value = !isEnabledRuleset.value;
65 | };
66 | </script>
67 | 
68 | <template>
69 |   <main>
70 |     <select v-model="rulesetFileName" @change="loadFile">
71 |       <option v-for="fileName in fileNames" :key="fileName">
72 |         {{ fileName }}
73 |       </option>
74 |     </select>
75 |     <div class="rules-editor"></div>
76 |     <div ref="jsonEditor" class="jsoneditor-container"></div>
77 |     <button @click="saveRuleset">Save</button>
78 |     <button v-if="isEnabledRuleset" @click="toggleAvailable">
79 |       Disable Ruleset
80 |     </button>
81 |     <button v-else @click="toggleAvailable">Enable Ruleset</button>
82 |   </main>
83 | </template>
84 | 
85 | <style scoped>
86 | .rules-editor {
87 |   display: flex;
88 |   flex-direction: column;
89 |   align-items: center;
90 | }
91 | 
92 | .jsoneditor-container {
93 |   width: 100%;
94 |   height: 500px;
95 |   margin-bottom: 20px;
96 | }
97 | </style>
98 | 


--------------------------------------------------------------------------------
/src/views/HomeView.vue:
--------------------------------------------------------------------------------
  1 | <script setup>
  2 | import { computed } from 'vue';
  3 | import { useRouter } from 'vue-router';
  4 | import { useRulesStore } from '@/stores/rulesStore';
  5 | import LandingDescription from '../components/LandingDescription.vue';
  6 | import ExtensionUploadArea from '../components/ExtensionUploadArea.vue';
  7 | import OverlayCard from '@/components/OverlayCard.vue';
  8 | import { useManifestStore } from '@/stores/manifestStore';
  9 | const rulesStore = useRulesStore();
 10 | const manifestStore = useManifestStore();
 11 | let filesUploaded = computed(() => rulesStore.parsedRulesList.length > 0);
 12 | let isFirstVisit = computed(() => manifestStore.isFirstVisit);
 13 | 
 14 | const router = useRouter();
 15 | 
 16 | function goToRequests() {
 17 |   if (filesUploaded.value) {
 18 |     router.push({ name: 'requests' });
 19 |   }
 20 | }
 21 | </script>
 22 | 
 23 | <template>
 24 |   <main>
 25 |     <OverlayCard v-show="isFirstVisit" />
 26 |     <div class="wrapper">
 27 |       <nav>
 28 |         <RouterLink to="/">Home</RouterLink>
 29 |         <RouterLink to="/rules">Rules Editor</RouterLink>
 30 |         <RouterLink to="/rules">Requests Playground</RouterLink>
 31 |       </nav>
 32 |     </div>
 33 |     <header>
 34 |       <div class="left-section">
 35 |         <img
 36 |           alt="Google Chrome Labs"
 37 |           class="logo"
 38 |           src="@/assets/ChromeLabsLogo.png"
 39 |           width="65"
 40 |           height="65"
 41 |         />
 42 |         <div class="wrapper">
 43 |           <LandingDescription />
 44 |         </div>
 45 |       </div>
 46 |       <div class="right-section">
 47 |         <ExtensionUploadArea />
 48 |       </div>
 49 |     </header>
 50 |     <button v-show="filesUploaded" @click="goToRequests">
 51 |       Go to Requests Playground
 52 |     </button>
 53 |   </main>
 54 | </template>
 55 | 
 56 | <style scoped>
 57 | header {
 58 |   display: flex;
 59 |   justify-content: space-between;
 60 |   align-items: center;
 61 |   line-height: 1.5;
 62 |   max-height: 100vh;
 63 | }
 64 | 
 65 | .left-section {
 66 |   display: flex;
 67 |   flex-direction: row;
 68 |   align-items: center;
 69 | }
 70 | 
 71 | .logo {
 72 |   margin-right: 2rem;
 73 | }
 74 | 
 75 | nav {
 76 |   width: 100%;
 77 |   font-size: 12px;
 78 |   text-align: center;
 79 |   margin-top: 2rem;
 80 | }
 81 | 
 82 | nav a.router-link-exact-active {
 83 |   color: var(--color-text);
 84 | }
 85 | 
 86 | nav a.router-link-exact-active:hover {
 87 |   background-color: transparent;
 88 | }
 89 | 
 90 | nav a {
 91 |   display: inline-block;
 92 |   padding: 0 1rem;
 93 |   border-left: 1px solid var(--color-border);
 94 | }
 95 | 
 96 | nav a:first-of-type {
 97 |   border: 0;
 98 | }
 99 | 
100 | .wrapper {
101 |   display: flex;
102 |   flex-direction: column;
103 | }
104 | 
105 | .right-section {
106 |   display: flex;
107 |   align-items: flex-start;
108 | }
109 | 
110 | @media (min-width: 1024px) {
111 |   header {
112 |     padding-right: calc(var(--section-gap) / 2);
113 |   }
114 | 
115 |   .wrapper {
116 |     place-items: flex-start;
117 |     flex-wrap: wrap;
118 |   }
119 | }
120 | </style>
121 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | 
 2 | # Interactive DNR Tool
 3 | ## About
 4 | The goal of this project is to create a user-friendly web application that helps extension developers make extensions that use the [declarativeNetRequest API](https://developer.chrome.com/docs/extensions/reference/api/declarativeNetRequest). It aims to provide a visual representation of the flow of data and the execution of rules, helping developers monitor, preview and debug their extensions’ behaviour effectively.
 5 | 
 6 | Complete project proposal: [GSoC '24 Proposal - DNR Interactive Tool for Chrome Extensions](https://docs.google.com/document/d/1u1KM-eUJV1uFelV0dwjk4DaX8g7enOsITz9cWW7NVq4/edit?usp=sharing)
 7 | 
 8 | ## Installation
 9 | 
10 | To set up and run this project locally, follow these steps:
11 |    
12 | 1. __Clone the Repository__: Clone the project repository to your local machine using the command `git clone https://github.com/GoogleChromeLabs/interactive-dnr-tool.git`.
13 | 2. __Navigate to the Project Directory__: Open your command line tool and navigate to the project directory using `cd interactive-dnr-tool`.
14 | 3. __Install Dependencies__: Run `npm install` to install all the necessary packages and dependencies.
15 | 4. __Run the Project__: Start the development server by running `npm run dev`. Open your web browser and go to the specified port to view the application.
16 | 
17 | If you encounter any issues during installation, make sure all dependencies are correctly installed, review any error messages for clues, and check the project documentation or open an issue on GitHub for further assistance.
18 | 
19 | 
20 | ## How to Use
21 | To use this tool, you need to acquire the extension's source code and do the following:
22 | 
23 | 1. __Upload Your Manifest File:__ Click on the "Upload Manifest" section or drag and drop your `manifest.json` file. Ensure that the file contains all necessary fields.
24 | 2.  __Upload Ruleset files:__ After uploading the manifest, proceed to upload one or more ruleset files by clicking  the "Upload Ruleset Files" section or by dragging and dropping them. Files should  be in JSON format and follow the specified ruleset structure.
25 | 3. __Create HTTP Requests to find the matching rule:__ Fill out the form and click submit to see the matching rule.
26 | 4. __Review and Modify Rules:__ Once uploaded, your rules will be displayed in the rules editor. You can review, modify, or delete rules directly within this editor.
27 | 
28 | ## TODO
29 | This project is still a long way from being complete, so contributions are welcome!
30 | 
31 | 1.  Animations to show events like when a rule matches a request, and improving user experience, flow of usage, and general look-and-feel (includes using properly licensed images)    
32 | 2.  Functionality to export modified rulesets    
33 | 3.  Embedding URL filter string parsing component as part of the [documentation](https://developer.chrome.com/docs/extensions/reference/api/declarativeNetRequest)    
34 | 4.  Including [response headers](https://github.com/w3c/webextensions/issues/460)    
35 | 5.  Writing tests, especially for key functions such as URL filter string parsing and matching    
36 | 6.  Enabling more requests types and with specific headers, the frame that made the request, etc.
37 | 


--------------------------------------------------------------------------------
/src/utils.js:
--------------------------------------------------------------------------------
 1 | // Checks validity of URLFilter string
 2 | function isValidURLFilter(urlFilterString) {
 3 |   // Ensure only valid constructs are present
 4 |   const validConstructs = /^[*|^a-zA-Z0-9_\-.%?/;=@&:]+$/;
 5 |   if (!validConstructs.test(urlFilterString)) {
 6 |     return false; // Invalid constructs present
 7 |   }
 8 |   // Check for ASCII characters
 9 |   for (let i = 0; i < urlFilterString.length; i++) {
10 |     if (urlFilterString.charCodeAt(i) > 127) {
11 |       return false; // Non-ASCII character found
12 |     }
13 |   }
14 |   if (urlFilterString.startsWith('||*')) {
15 |     return false; // Cannot start with ||* - use only * at the beginning for the intended effect.
16 |   }
17 |   if (urlFilterString.includes('|') && !urlFilterString.includes('||')) {
18 |     if (!urlFilterString.startsWith('|') && !urlFilterString.endsWith('|')) {
19 |       return false; // Cannot start or end without |.
20 |     }
21 |     if (urlFilterString.length === 1) {
22 |       return false; // Cannot have only |.
23 |     }
24 |   }
25 |   if (urlFilterString.includes('||')) {
26 |     if (!urlFilterString.startsWith('||')) {
27 |       return false; // Cannot have || in the middle.
28 |     }
29 |     if (urlFilterString.length === 2) {
30 |       return false; // Cannot have only ||.
31 |     }
32 |     if (
33 |       urlFilterString.slice(2).includes('|') &&
34 |       !urlFilterString.endsWith('|')
35 |     ) {
36 |       return false; // Cannot have | in the middle.
37 |     }
38 |   }
39 |   if (
40 |     urlFilterString.slice(1, -1).includes('|') &&
41 |     urlFilterString.slice(0, 2) !== '||'
42 |   ) {
43 |     return false; // Cannot have | in the middle.
44 |   }
45 |   return true;
46 | }
47 | function sortRules(parsedRulesList) {
48 |   parsedRulesList.sort((a, b) => {
49 |     // Compare by developer-defined priority
50 |     if (a.rule.priority !== b.rule.priority) {
51 |       return b.rule.priority - a.rule.priority;
52 |     }
53 | 
54 |     // If priorities are equal, compare by action field
55 |     const actionOrder = [
56 |       'allow',
57 |       'allowAllRequests',
58 |       'block',
59 |       'upgradeScheme',
60 |       'redirect'
61 |     ];
62 |     const aActionIndex = actionOrder.indexOf(a.rule.action.type);
63 |     const bActionIndex = actionOrder.indexOf(b.rule.action.type);
64 | 
65 |     if (aActionIndex !== bActionIndex) {
66 |       return aActionIndex - bActionIndex;
67 |     }
68 | 
69 |     // If both priority and action type are the same, compare modifyHeaders rules
70 |     if (a.rule.action.type !== 'block' && a.rule.action.type !== 'redirect') {
71 |       const aModifyHeaders = a.rule.action.modifyHeaders || [];
72 |       const bModifyHeaders = b.rule.action.modifyHeaders || [];
73 | 
74 |       for (
75 |         let i = 0;
76 |         i < Math.min(aModifyHeaders.length, bModifyHeaders.length);
77 |         i++
78 |       ) {
79 |         const aHeader = aModifyHeaders[i];
80 |         const bHeader = bModifyHeaders[i];
81 | 
82 |         // Compare header modification operations
83 |         if (aHeader.operation !== bHeader.operation) {
84 |           const operationOrder = ['append', 'set', 'remove'];
85 |           const aOperationIndex = operationOrder.indexOf(aHeader.operation);
86 |           const bOperationIndex = operationOrder.indexOf(bHeader.operation);
87 |           return aOperationIndex - bOperationIndex;
88 |         }
89 |       }
90 |     }
91 | 
92 |     // If all criteria are the same, retain original order
93 |     return 0;
94 |   });
95 | }
96 | 
97 | export { isValidURLFilter, sortRules };
98 | 


--------------------------------------------------------------------------------
/docs/code-of-conduct.md:
--------------------------------------------------------------------------------
 1 | # Code of Conduct
 2 | 
 3 | ## Our Pledge
 4 | 
 5 | In the interest of fostering an open and welcoming environment, we as
 6 | contributors and maintainers pledge to making participation in our project and
 7 | our community a harassment-free experience for everyone, regardless of age, body
 8 | size, disability, ethnicity, gender identity and expression, level of
 9 | experience, education, socio-economic status, nationality, personal appearance,
10 | race, religion, or sexual identity and orientation.
11 | 
12 | ## Our Standards
13 | 
14 | Examples of behavior that contributes to creating a positive environment
15 | include:
16 | 
17 | *   Using welcoming and inclusive language
18 | *   Being respectful of differing viewpoints and experiences
19 | *   Gracefully accepting constructive criticism
20 | *   Focusing on what is best for the community
21 | *   Showing empathy towards other community members
22 | 
23 | Examples of unacceptable behavior by participants include:
24 | 
25 | *   The use of sexualized language or imagery and unwelcome sexual attention or
26 |     advances
27 | *   Trolling, insulting/derogatory comments, and personal or political attacks
28 | *   Public or private harassment
29 | *   Publishing others' private information, such as a physical or electronic
30 |     address, without explicit permission
31 | *   Other conduct which could reasonably be considered inappropriate in a
32 |     professional setting
33 | 
34 | ## Our Responsibilities
35 | 
36 | Project maintainers are responsible for clarifying the standards of acceptable
37 | behavior and are expected to take appropriate and fair corrective action in
38 | response to any instances of unacceptable behavior.
39 | 
40 | Project maintainers have the right and responsibility to remove, edit, or reject
41 | comments, commits, code, wiki edits, issues, and other contributions that are
42 | not aligned to this Code of Conduct, or to ban temporarily or permanently any
43 | contributor for other behaviors that they deem inappropriate, threatening,
44 | offensive, or harmful.
45 | 
46 | ## Scope
47 | 
48 | This Code of Conduct applies both within project spaces and in public spaces
49 | when an individual is representing the project or its community. Examples of
50 | representing a project or community include using an official project e-mail
51 | address, posting via an official social media account, or acting as an appointed
52 | representative at an online or offline event. Representation of a project may be
53 | further defined and clarified by project maintainers.
54 | 
55 | This Code of Conduct also applies outside the project spaces when the Project
56 | Steward has a reasonable belief that an individual's behavior may have a
57 | negative impact on the project or its community.
58 | 
59 | ## Conflict Resolution
60 | 
61 | We do not believe that all conflict is bad; healthy debate and disagreement
62 | often yield positive results. However, it is never okay to be disrespectful or
63 | to engage in behavior that violates the project’s code of conduct.
64 | 
65 | If you see someone violating the code of conduct, you are encouraged to address
66 | the behavior directly with those involved. Many issues can be resolved quickly
67 | and easily, and this gives people more control over the outcome of their
68 | dispute. If you are unable to resolve the matter for any reason, or if the
69 | behavior is threatening or harassing, report it. We are dedicated to providing
70 | an environment where participants feel welcome and safe.
71 | 
72 | Reports should be directed to *[PROJECT STEWARD NAME(s) AND EMAIL(s)]*, the
73 | Project Steward(s) for *[PROJECT NAME]*. It is the Project Steward’s duty to
74 | receive and address reported violations of the code of conduct. They will then
75 | work with a committee consisting of representatives from the Open Source
76 | Programs Office and the Google Open Source Strategy team. If for any reason you
77 | are uncomfortable reaching out to the Project Steward, please email
78 | opensource@google.com.
79 | 
80 | We will investigate every complaint, but you may not receive a direct response.
81 | We will use our discretion in determining when and how to follow up on reported
82 | incidents, which may range from not taking action to permanent expulsion from
83 | the project and project-sponsored spaces. We will notify the accused of the
84 | report and provide them an opportunity to discuss it before any action is taken.
85 | The identity of the reporter will be omitted from the details of the report
86 | supplied to the accused. In potentially harmful situations, such as ongoing
87 | harassment or threats to anyone's safety, we may take action without notice.
88 | 
89 | ## Attribution
90 | 
91 | This Code of Conduct is adapted from the Contributor Covenant, version 1.4,
92 | available at
93 | https://www.contributor-covenant.org/version/1/4/code-of-conduct/
94 | 


--------------------------------------------------------------------------------
/src/stores/urlFilterStore.js:
--------------------------------------------------------------------------------
  1 | import { defineStore } from 'pinia';
  2 | import { isValidURLFilter } from '@/utils';
  3 | 
  4 | //https://source.chromium.org/chromium/chromium/src/+/main:extensions/browser/api/declarative_net_request/indexed_rule.cc;l=47
  5 | /* Returns an object 'indexedRule' with the following signature:-
  6 |     {
  7 |       anchorLeft: 'BOUNDARY' | 'SUBDOMAIN' | 'NONE',
  8 |       urlPatternType: 'SUBSTRING' | 'WILDCARDED',
  9 |       urlPattern: 'abc*def',
 10 |       anchorRight: 'BOUNDARY' | 'NONE'
 11 |     }
 12 | */
 13 | class URLFilterParser {
 14 |   constructor(urlFilter, indexedRule) {
 15 |     this.urlFilter = urlFilter || '';
 16 |     this.urlFilterLen = this.urlFilter.length;
 17 |     this.index = 0;
 18 |     this.indexedRule = indexedRule;
 19 |   }
 20 | 
 21 |   static parse(urlFilter, indexedRule) {
 22 |     if (!indexedRule) {
 23 |       throw new Error('IndexedRule is required');
 24 |     }
 25 |     if (!isValidURLFilter(urlFilter)) {
 26 |       throw new Error('Invalid URLFilter string');
 27 |     }
 28 |     new URLFilterParser(urlFilter, indexedRule).parseImpl();
 29 |   }
 30 | 
 31 |   parseImpl() {
 32 |     this.parseLeftAnchor();
 33 |     console.assert(this.index <= 2, 'Index should be less than or equal to 2');
 34 |     this.parseFilterString();
 35 |     console.assert(
 36 |       this.index === this.urlFilterLen || this.index + 1 === this.urlFilterLen,
 37 |       'Index should be at the end or one before the end of urlFilter length'
 38 |     );
 39 |     this.parseRightAnchor();
 40 |     console.assert(
 41 |       this.index === this.urlFilterLen,
 42 |       'Index should be equal to urlFilter length'
 43 |     );
 44 |   }
 45 | 
 46 |   parseLeftAnchor() {
 47 |     this.indexedRule.anchorLeft = 'NONE';
 48 |     if (this.isAtAnchor()) {
 49 |       ++this.index;
 50 |       this.indexedRule.anchorLeft = 'BOUNDARY';
 51 |       if (this.isAtAnchor()) {
 52 |         ++this.index;
 53 |         this.indexedRule.anchorLeft = 'SUBDOMAIN';
 54 |       }
 55 |     }
 56 |   }
 57 | 
 58 |   parseFilterString() {
 59 |     this.indexedRule.urlPatternType = 'SUBSTRING';
 60 |     let leftIndex = this.index;
 61 |     while (this.index < this.urlFilterLen && !this.isAtRightAnchor()) {
 62 |       if (this.isAtSeparatorOrWildcard()) {
 63 |         this.indexedRule.urlPatternType = 'WILDCARDED';
 64 |       }
 65 |       ++this.index;
 66 |     }
 67 |     this.indexedRule.urlPattern = this.urlFilter.substring(
 68 |       leftIndex,
 69 |       this.index
 70 |     );
 71 |   }
 72 | 
 73 |   parseRightAnchor() {
 74 |     this.indexedRule.anchorRight = 'NONE';
 75 |     if (this.isAtRightAnchor()) {
 76 |       ++this.index;
 77 |       this.indexedRule.anchorRight = 'BOUNDARY';
 78 |     }
 79 |   }
 80 | 
 81 |   isAtSeparatorOrWildcard() {
 82 |     return (
 83 |       this.isAtValidIndex() &&
 84 |       (this.urlFilter[this.index] === '^' || this.urlFilter[this.index] === '*')
 85 |     );
 86 |   }
 87 | 
 88 |   isAtRightAnchor() {
 89 |     return (
 90 |       this.isAtAnchor() &&
 91 |       this.index > 0 &&
 92 |       this.index + 1 === this.urlFilterLen
 93 |     );
 94 |   }
 95 | 
 96 |   isAtValidIndex() {
 97 |     return this.index < this.urlFilterLen;
 98 |   }
 99 | 
100 |   isAtAnchor() {
101 |     return this.isAtValidIndex() && this.urlFilter[this.index] === '|';
102 |   }
103 | }
104 | 
105 | export const useURLFilterStore = defineStore('urlFilter', {
106 |   state: () => ({
107 |     urlFilter: '',
108 |     indexedRule: {},
109 |     urlFilterParser: null
110 |   }),
111 |   actions: {
112 |     initializeParser(urlFilter) {
113 |       this.urlFilter = urlFilter;
114 |       this.indexedRule = {};
115 |       this.urlFilterParser = new URLFilterParser(urlFilter, this.indexedRule);
116 |     },
117 |     parseURLFilter(urlFilterString) {
118 |       this.initializeParser(urlFilterString);
119 |       if (this.urlFilterParser) {
120 |         this.urlFilterParser.parseImpl();
121 |       }
122 |       if (this.indexedRule) {
123 |         return this.indexedRule;
124 |       }
125 |     },
126 |     // Test input url against the generated indexedRule object
127 |     urlMatcher(url, indexedRule) {
128 |       const urlPattern = indexedRule.urlPattern;
129 |       let substrings = [];
130 |       if (indexedRule.urlPatternType === 'SUBSTRING') {
131 |         if (!url.includes(urlPattern)) {
132 |           return false;
133 |         }
134 |         substrings.push(urlPattern);
135 |       } else if (indexedRule.urlPatternType === 'WILDCARDED') {
136 |         let string = '';
137 |         for (let i = 0; i < urlPattern.length; i++) {
138 |           if (
139 |             urlPattern[i] === '*' ||
140 |             urlPattern[i] === '^' ||
141 |             urlPattern[i] === '|'
142 |           ) {
143 |             if (string) {
144 |               substrings.push(string);
145 |               string = '';
146 |             }
147 |           } else {
148 |             string += urlPattern[i];
149 |           }
150 |         }
151 |         if (string) {
152 |           substrings.push(string);
153 |         }
154 |       }
155 |       let x = 0; // index in urlPattern
156 |       let index; // index in url where the checking starts
157 |       if (indexedRule.anchorLeft === 'BOUNDARY') {
158 |         index = 0;
159 |       } else {
160 |         index = url.indexOf(substrings[0]);
161 |         if (index == -1) {
162 |           return false;
163 |         }
164 |       }
165 |       if (indexedRule.anchorRight === 'BOUNDARY') {
166 |         if (
167 |           urlPattern[urlPattern.length - 1] != '^' &&
168 |           urlPattern[urlPattern.length - 1] != '*' &&
169 |           url.endsWith(substrings[substrings.length - 1])
170 |         ) {
171 |           return true;
172 |         }
173 |       }
174 |       if (indexedRule.anchorLeft === 'SUBDOMAIN') {
175 |         index = url.indexOf(substrings[0]);
176 |         if (index == -1 || url[index - 1] != '.') {
177 |           return false;
178 |         }
179 |       }
180 |       let unmatchables =
181 |         'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789_-.%';
182 |       // DOUBT: Can multiple wildcards be present in the urlPattern?
183 |       while (urlPattern[x] == '*') {
184 |         x++;
185 |       }
186 |       while (urlPattern[x] == '^') {
187 |         if (unmatchables.includes(url[index])) {
188 |           return false;
189 |         }
190 |         x++;
191 |         index++;
192 |       }
193 |       let inOrder = url.indexOf(substrings[0], index) != -1;
194 |       for (let i = 1; i < substrings.length; i++) {
195 |         if (url.indexOf(substrings[i], url.indexOf(substrings[i - 1])) == -1) {
196 |           inOrder = false;
197 |           break;
198 |         }
199 |       }
200 |       if (inOrder) {
201 |         return true;
202 |       } else {
203 |         return false;
204 |       }
205 |     }
206 |   }
207 | });
208 | 


--------------------------------------------------------------------------------
/src/stores/manifestStore.js:
--------------------------------------------------------------------------------
  1 | import { defineStore } from 'pinia';
  2 | 
  3 | export const useManifestStore = defineStore('manifest', {
  4 |   state: () => ({
  5 |     /*
  6 |     Signature of each object in rulesetFilePaths
  7 |     {
  8 |       rulesetFileName: 'rules_1.json',
  9 |       rulesetFilePath: 'path/to/ruleset.json',
 10 |       rulesetId: 'rulesetId',
 11 |       isEnabled: true | false
 12 |     }
 13 |     */
 14 |     rulesetFilePaths: [],
 15 |     isFirstVisit: true
 16 |   }),
 17 |   getters: {
 18 |     getRulesetFilePaths(state) {
 19 |       return state.rulesetFilePaths;
 20 |     }
 21 |   },
 22 |   actions: {
 23 |     setIsFirstVisit(value) {
 24 |       this.isFirstVisit = value;
 25 |     },
 26 |     clearRulesetFilePaths() {
 27 |       this.rulesetFilePaths = [];
 28 |     },
 29 |     setRulesetFilePaths(manifest) {
 30 |       if (manifest.declarative_net_request.rule_resources) {
 31 |         manifest.declarative_net_request.rule_resources.forEach((ruleset) => {
 32 |           const rulesetFilePath = ruleset.path;
 33 |           const rulesetFileName = rulesetFilePath.split('/').pop();
 34 | 
 35 |           this.rulesetFilePaths.push({
 36 |             rulesetFileName: rulesetFileName,
 37 |             rulesetFilePath: rulesetFilePath,
 38 |             rulesetId: ruleset.id,
 39 |             isEnabled: ruleset.enabled
 40 |           });
 41 |         });
 42 |       }
 43 |     },
 44 |     toggleRulesetAvailability(rulesetFileName) {
 45 |       const rulesetFilePathObject = this.rulesetFilePaths.find(
 46 |         (ruleset) => ruleset.rulesetFileName === rulesetFileName
 47 |       );
 48 |       rulesetFilePathObject.isEnabled = !rulesetFilePathObject.isEnabled;
 49 |     },
 50 |     isValidManifest(manifest) {
 51 |       let syntaxError = {};
 52 |       syntaxError['type'] = [];
 53 |       syntaxError['missingFields'] = [];
 54 |       syntaxError['invalidValueTypes'] = [];
 55 | 
 56 |       // Check for required fields
 57 |       const requiredFieldsAndTypes = {
 58 |         // "description" and "icon" required for uploading to web store
 59 |         // permissions required for extensions such as those using DNR
 60 |         name: 'string',
 61 |         version: 'string',
 62 |         manifest_version: 'number',
 63 |         permissions: 'array'
 64 |       };
 65 | 
 66 |       for (let field of Object.keys(requiredFieldsAndTypes)) {
 67 |         if (!Object.prototype.hasOwnProperty.call(manifest, field)) {
 68 |           syntaxError.isError = true;
 69 |           if (!syntaxError['type'].includes('missingFields')) {
 70 |             syntaxError['type'].push('missingFields');
 71 |             syntaxError['missingFields'] = [];
 72 |           }
 73 |           syntaxError['missingFields'].push(field);
 74 |         } else {
 75 |           const expectedType = requiredFieldsAndTypes[field];
 76 |           const actualValue = manifest[field];
 77 |           if (expectedType === 'array') {
 78 |             if (!Array.isArray(actualValue)) {
 79 |               syntaxError.isError = true;
 80 |               if (!syntaxError['type'].includes('invalidValueTypes')) {
 81 |                 syntaxError['type'].push('invalidValueTypes');
 82 |                 syntaxError['invalidValueTypes'] = [];
 83 |               }
 84 |               syntaxError['invalidValueTypes'].push(field);
 85 |             }
 86 |           } else if (typeof actualValue !== expectedType) {
 87 |             syntaxError.isError = true;
 88 |             if (!syntaxError['type'].includes('invalidValueTypes')) {
 89 |               syntaxError['type'].push('invalidValueTypes');
 90 |               syntaxError['invalidValueTypes'] = [];
 91 |             }
 92 |             syntaxError['invalidValueTypes'].push(field);
 93 |           }
 94 |         }
 95 |       }
 96 | 
 97 |       const otherFieldsAndTypes = {
 98 |         action: 'object',
 99 |         author: 'string',
100 |         background: 'object',
101 |         browser_action: 'object',
102 |         chrome_settings_overrides: 'object',
103 |         chrome_ui_overrides: 'object',
104 |         chrome_url_overrides: 'object',
105 |         commands: 'object',
106 |         content_security_policy: 'string',
107 |         content_scripts: 'array',
108 |         converted_from_user_script: 'boolean',
109 |         current_locale: 'string',
110 |         default_locale: 'string',
111 |         description: 'string',
112 |         devtools_page: 'string',
113 |         event_rules: 'array',
114 |         externally_connectable: 'object',
115 |         file_browser_handlers: 'array',
116 |         file_system_provider_capabilities: 'object',
117 |         homepage_url: 'string',
118 |         host_permissions: 'array',
119 |         icons: 'object',
120 |         import: 'array',
121 |         incognito: 'object',
122 |         input_components: 'object',
123 |         key: 'string',
124 |         minimum_chrome_version: 'string',
125 |         nacl_modules: 'array',
126 |         oauth2: 'object',
127 |         offline_enabled: 'boolean',
128 |         omnibox: 'object',
129 |         optional_permissions: 'array',
130 |         options_page: 'string',
131 |         options_ui: 'object',
132 |         page_action: 'object',
133 |         platforms: 'object',
134 |         replacement_web_app: 'object',
135 |         requirements: 'object',
136 |         sandbox: 'object',
137 |         short_name: 'string',
138 |         sidebar_action: 'object',
139 |         storage: 'object',
140 |         tts_engine: 'object',
141 |         update_url: 'string',
142 |         version_name: 'string',
143 |         web_accessible_resources: 'array',
144 |         webview: 'object'
145 |       };
146 | 
147 |       for (let field of Object.keys(otherFieldsAndTypes)) {
148 |         if (Object.prototype.hasOwnProperty.call(manifest, field)) {
149 |           const expectedType = otherFieldsAndTypes[field];
150 |           const actualValue = manifest[field];
151 |           if (expectedType === 'array') {
152 |             if (!Array.isArray(actualValue)) {
153 |               syntaxError.isError = true;
154 |               if (!syntaxError['type'].includes('invalidValueTypes')) {
155 |                 syntaxError['type'].push('invalidValueTypes');
156 |                 syntaxError['invalidValueTypes'] = [];
157 |               }
158 |               syntaxError['invalidValueTypes'].push(field);
159 |             }
160 |           } else if (typeof actualValue !== expectedType) {
161 |             syntaxError.isError = true;
162 |             if (!syntaxError['type'].includes('invalidValueTypes')) {
163 |               syntaxError['type'].push('invalidValueTypes');
164 |               syntaxError['invalidValueTypes'] = [];
165 |             }
166 |             syntaxError['invalidValueTypes'].push(field);
167 |           }
168 |         }
169 |       }
170 | 
171 |       // Check for declarativeNetRequest and declarativeNetRequestWithHostAccess permissions
172 |       if (
173 |         Object.prototype.hasOwnProperty.call(manifest, 'permissions') &&
174 |         !manifest.permissions.includes('declarativeNetRequest') &&
175 |         !manifest.permissions.includes('declarativeNetRequestWithHostAccess')
176 |       ) {
177 |         syntaxError.isError = true;
178 |         if (!syntaxError['type'].includes('missingPermissions')) {
179 |           syntaxError['type'].push('missingPermissions');
180 |         }
181 |       }
182 | 
183 |       // Remove empty error types
184 |       if (syntaxError['missingFields'].length === 0) {
185 |         delete syntaxError['missingFields'];
186 |       }
187 |       if (syntaxError['invalidValueTypes'].length === 0) {
188 |         delete syntaxError['invalidValueTypes'];
189 |       }
190 | 
191 |       if (syntaxError.isError) {
192 |         return syntaxError;
193 |       } else {
194 |         return true;
195 |       }
196 |     }
197 |   },
198 |   persist: {
199 |     storage: sessionStorage,
200 |     paths: ['rulesetFilePaths', 'isFirstVisit']
201 |   }
202 | });
203 | 


--------------------------------------------------------------------------------
/src/stores/rulesStore.js:
--------------------------------------------------------------------------------
  1 | import { defineStore } from 'pinia';
  2 | import { useURLFilterStore } from './urlFilterStore';
  3 | import { useManifestStore } from './manifestStore';
  4 | import { isValidURLFilter, sortRules } from '@/utils';
  5 | import { parse } from 'vue/compiler-sfc';
  6 | 
  7 | // const urlFilterStore = useURLFilterStore()
  8 | 
  9 | export const useRulesStore = defineStore('rules', {
 10 |   state: () => ({
 11 |     /* Signature of each element of parsedRulesList:
 12 |     {
 13 |       rule: {
 14 |           id: 1,
 15 |           priority: 1,
 16 |           condition: {
 17 |               urlFilter: 'example.com'
 18 |           },
 19 |           action: {
 20 |               type: 'block'
 21 |           }
 22 |       },
 23 |       ruleId: 1,
 24 |       rulesetId: 1,
 25 |       urlParserIndexedRule: {},
 26 |       isEnabled: true | false,
 27 |       rulesetFileName: 'rules_1.json'
 28 |     }
 29 |     */
 30 |     parsedRulesList: [],
 31 |     requestMatched: false,
 32 |     matchedRuleString: '',
 33 |     urlFilterStore: useURLFilterStore(),
 34 |     manifestStore: useManifestStore()
 35 |   }),
 36 |   getters: {
 37 |     getParsedRulesList(state) {
 38 |       return state.parsedRulesList;
 39 |     },
 40 |     getRequestMatched(state) {
 41 |       return state.requestMatched;
 42 |     },
 43 |     getRulesetsList(state) {
 44 |       return state.rulesetsList;
 45 |     },
 46 |     getMatchedRuleString(state) {
 47 |       return state.matchedRuleString;
 48 |     },
 49 |     getParsedRulesListLength(state) {
 50 |       return state.parsedRulesList.length;
 51 |     }
 52 |   },
 53 |   actions: {
 54 |     clearParsedRulesList() {
 55 |       this.parsedRulesList = [];
 56 |     },
 57 |     setMatchedRuleString(value) {
 58 |       this.matchedRuleString = value;
 59 |     },
 60 |     setRequestMatched(value) {
 61 |       this.requestMatched = value;
 62 |     },
 63 |     // Return set of rules given the ruleset file name
 64 |     getRuleset(rulesetFileName) {
 65 |       if (!this.getParsedRulesList) {
 66 |         return [];
 67 |       }
 68 |       let ruleset = [];
 69 |       for (let index in this.parsedRulesList) {
 70 |         const ruleItem = this.parsedRulesList[index];
 71 | 
 72 |         if (ruleItem.rulesetFileName === rulesetFileName) {
 73 |           ruleset.push(ruleItem.rule);
 74 |         }
 75 |       }
 76 |       return ruleset;
 77 |     },
 78 |     // Update parsedRulesList with modified rule(s) of a given ruleset
 79 |     saveRuleset(rulesetFileName, ruleset) {
 80 |       let updatedRulesList = [];
 81 |       let processedRuleIds = new Set();
 82 | 
 83 |       let matchingParsedRules = this.parsedRulesList.filter(
 84 |         (parsedRule) => parsedRule.rulesetFileName === rulesetFileName
 85 |       );
 86 |       for (let parsedRule of matchingParsedRules) {
 87 |         let rule = ruleset.find((r) => r.id === parsedRule.ruleId);
 88 | 
 89 |         if (rule && this.isValidRule(rule)) {
 90 |           let indexedRule = this.urlFilterStore.parseURLFilter(
 91 |             rule.condition.urlFilter
 92 |           );
 93 |           parsedRule.rule = rule;
 94 |           parsedRule.urlParserIndexedRule = indexedRule;
 95 |           updatedRulesList.push(parsedRule);
 96 |           processedRuleIds.add(rule.id);
 97 |         } else {
 98 |           updatedRulesList.push(parsedRule);
 99 |         }
100 |       }
101 |       let nonMatchingParsedRules = this.parsedRulesList.filter(
102 |         (parsedRule) => parsedRule.rulesetFileName !== rulesetFileName
103 |       );
104 |       updatedRulesList.push(...nonMatchingParsedRules);
105 | 
106 |       // Add new rules that are not present in parsedRulesList
107 |       for (let rule of ruleset) {
108 |         if (processedRuleIds.has(rule.id)) continue;
109 |         if (this.isValidRule(rule)) {
110 |           let indexedRule = this.urlFilterStore.parseURLFilter(
111 |             rule.condition.urlFilter
112 |           );
113 |           updatedRulesList.push({
114 |             rule: rule,
115 |             urlParserIndexedRule: indexedRule,
116 |             ruleId: rule.id,
117 |             rulesetID: this.getRulesetIdForFileName(rulesetFileName), // Assuming a method to get rulesetID
118 |             isEnabled: true,
119 |             rulesetFileName: rulesetFileName
120 |           });
121 |         }
122 |       }
123 | 
124 |       this.parsedRulesList = updatedRulesList;
125 |     },
126 |     // Checks validity of URLFilter string
127 |     isValidURLFilter,
128 |     // Checks validity of rule, including checking validity of its condition, i.e., the URLFilter string
129 |     isValidRule(rule) {
130 |       let isValid = true;
131 |       if (!rule.id || (rule.id && !Number.isInteger(rule.id))) {
132 |         isValid = false;
133 |         console.log('id');
134 |       }
135 |       if (rule.priority && !Number.isInteger(rule.priority)) {
136 |         isValid = false;
137 |         console.log('priority');
138 |       }
139 |       if (!rule.condition || typeof rule.condition != 'object') {
140 |         isValid = false;
141 |         console.log('condition');
142 |       }
143 |       if (!this.isValidURLFilter(rule.condition.urlFilter)) {
144 |         isValid = false;
145 |       }
146 |       return isValid;
147 |     },
148 |     // Checks syntax and validity of ruleset file
149 |     isValidRuleset(ruleset) {
150 |       // Check if the ruleset is an array and is non-empty
151 |       if (!Array.isArray(ruleset) || ruleset.length === 0) {
152 |         return false;
153 |       }
154 |       // Validate each rule in the ruleset
155 |       for (let rule of ruleset) {
156 |         if (!this.isValidRule(rule)) {
157 |           return false;
158 |         }
159 |       }
160 |       return true;
161 |     },
162 |     // Parse a given ruleset and set parsed rules list with each parsed rule
163 |     setParsedRulesList(ruleset, fileName) {
164 |       for (let rulesetFileInfoObjects of this.manifestStore.getRulesetFilePaths)
165 |         if (rulesetFileInfoObjects.rulesetFilePath === fileName) {
166 |           ruleset.forEach((rule) => {
167 |             if (this.isValidRule(rule)) {
168 |               let indexedRule = this.urlFilterStore.parseURLFilter(
169 |                 rule.condition.urlFilter
170 |               );
171 |               this.parsedRulesList.push({
172 |                 rule: rule,
173 |                 urlParserIndexedRule: indexedRule,
174 |                 ruleId: rule.id,
175 |                 rulesetID: rulesetFileInfoObjects.rulesetId,
176 |                 isEnabled: rulesetFileInfoObjects.isEnabled,
177 |                 rulesetFileName: fileName
178 |               });
179 |             }
180 |           });
181 |         }
182 |       sortRules(this.parsedRulesList);
183 |     },
184 |     clearParsedRulesList() {
185 |       this.parsedRulesList = [];
186 |     },
187 |     // Change the availability of a ruleset
188 |     toggleRulesAvailability(rulesetFileName) {
189 |       let updatedRulesList = [];
190 |       for (let parsedRule of this.parsedRulesList) {
191 |         if (parsedRule.rulesetFileName === rulesetFileName) {
192 |           parsedRule.isEnabled = !parsedRule.isEnabled;
193 |         }
194 |         updatedRulesList.push(parsedRule);
195 |       }
196 |       this.parsedRulesList = updatedRulesList;
197 |     },
198 |     // Matches input HTTP request to parsed rule(s) and returns them
199 |     requestMatcher(request) {
200 |       let url = request.url;
201 |       let matchedRules = [];
202 |       for (let i = 0; i < this.parsedRulesList.length; i++) {
203 |         let indexedRule = this.parsedRulesList[i].urlParserIndexedRule;
204 |         if (
205 |           this.urlFilterStore.urlMatcher(url, indexedRule) &&
206 |           this.parsedRulesList[i].isEnabled
207 |         ) {
208 |           matchedRules.push(this.parsedRulesList[i]);
209 |         }
210 |       }
211 |       return matchedRules;
212 |     }
213 |   },
214 |   persist: {
215 |     storage: sessionStorage,
216 |     paths: ['parsedRulesList']
217 |   }
218 | });
219 | 


--------------------------------------------------------------------------------
/src/components/ExtensionUploadArea.vue:
--------------------------------------------------------------------------------
  1 | <script setup>
  2 | import { ref } from 'vue';
  3 | import { useManifestStore } from '@/stores/manifestStore';
  4 | import { useRulesStore } from '@/stores/rulesStore';
  5 | import FileUploadHeading from './FileUploadHeading.vue';
  6 | import ExtensionIcon from './icons/IconExtension.vue';
  7 | 
  8 | const manifestStore = useManifestStore();
  9 | const rulesStore = useRulesStore();
 10 | 
 11 | let manifestFileName = ref('');
 12 | let manifestFile = null;
 13 | 
 14 | let rulesetFileNames = ref('');
 15 | 
 16 | function parseManifestFile(manifestFile) {
 17 |   const reader = new FileReader();
 18 |   reader.onload = function (e) {
 19 |     try {
 20 |       const manifestObject = JSON.parse(e.target.result);
 21 |       let manifestValidationResult =
 22 |         manifestStore.isValidManifest(manifestObject); // true if no errors, error object otherwise
 23 |       if (manifestValidationResult === true) {
 24 |         manifestFileName.value = manifestFile.name;
 25 |         manifestStore.clearRulesetFilePaths();
 26 |         manifestStore.setRulesetFilePaths(manifestObject);
 27 |       } else {
 28 |         let output = 'Issues found:\n';
 29 | 
 30 |         for (let i = 0; i < manifestValidationResult['type'].length; i++) {
 31 |           if (manifestValidationResult['type'][i] === 'missingFields') {
 32 |             let missingFields =
 33 |               manifestValidationResult['missingFields'].join(', ');
 34 |             output += `- Missing fields: ${missingFields}\n`;
 35 |           }
 36 |           if (manifestValidationResult['type'][i] === 'invalidValueTypes') {
 37 |             let invalidValueTypes =
 38 |               manifestValidationResult['invalidValueTypes'].join(', ');
 39 |             output += `- Invalid value types for: ${invalidValueTypes}\n`;
 40 |           }
 41 |         }
 42 |         window.alert(output);
 43 |       }
 44 |     } catch (error) {
 45 |       console.log(error);
 46 |       window.alert('Error parsing manifest JSON');
 47 |     }
 48 |   };
 49 |   reader.readAsText(manifestFile);
 50 | }
 51 | 
 52 | function manifestInputHandler(ev) {
 53 |   ev.preventDefault();
 54 |   let numFiles = 0;
 55 |   let files = [];
 56 | 
 57 |   // Check if the file was dropped or selected from the file input
 58 |   if (ev.dataTransfer) {
 59 |     // Dropped file
 60 |     files = ev.dataTransfer.items;
 61 |   } else {
 62 |     // Selected from file input
 63 |     files = ev.target.files;
 64 |   }
 65 | 
 66 |   if (files.length != 0) {
 67 |     numFiles = files.length;
 68 |     if (numFiles === 0) {
 69 |       window.alert('No files were dropped');
 70 |       return;
 71 |     } else if (numFiles > 1) {
 72 |       window.alert('Only one file can be dropped at a time');
 73 |       return;
 74 |     }
 75 |     for (let i = 0; i < numFiles; i++) {
 76 |       if (files[i].kind === 'file') {
 77 |         manifestFile = files[i].getAsFile();
 78 |       } else {
 79 |         manifestFile = files[i];
 80 |       }
 81 |     }
 82 |   } else {
 83 |     files = ev.dataTransfer.files;
 84 |     numFiles = files.length;
 85 |     if (numFiles === 0) {
 86 |       window.alert('No files were dropped');
 87 |       return;
 88 |     } else if (numFiles > 1) {
 89 |       window.alert('Only one file can be dropped at a time');
 90 |       return;
 91 |     }
 92 |     for (let i = 0; i < numFiles; i++) {
 93 |       manifestFile = files[i];
 94 |     }
 95 |   }
 96 |   parseManifestFile(manifestFile);
 97 |   removeDragData(ev);
 98 | }
 99 | 
100 | function parseRulesetFile(rulesetFile) {
101 |   const reader = new FileReader();
102 |   const fileName = rulesetFile.name;
103 |   reader.onload = function (e) {
104 |     try {
105 |       const ruleset = JSON.parse(e.target.result); // Array of rules for the ruleset (one ruleset per file)
106 |       let rulesetValidationResult = rulesStore.isValidRuleset(ruleset); // true if no errors, error object otherwise
107 |       if (rulesetValidationResult === true) {
108 |         rulesStore.setParsedRulesList(ruleset, fileName);
109 |       } else {
110 |         let output = 'Issues found:\n';
111 | 
112 |         for (let i = 0; i < rulesetValidationResult['type'].length; i++) {
113 |           if (rulesetValidationResult['type'][i] === 'missingFields') {
114 |             let missingFields =
115 |               rulesetValidationResult['missingFields'].join(', ');
116 |             output += `- Missing fields: ${missingFields}\n`;
117 |           }
118 |           if (rulesetValidationResult['type'][i] === 'invalidValueTypes') {
119 |             let invalidValueTypes =
120 |               rulesetValidationResult['invalidValueTypes'].join(', ');
121 |             output += `- Invalid value types for: ${invalidValueTypes}\n`;
122 |           }
123 |         }
124 |         window.alert(output);
125 |       }
126 |     } catch (error) {
127 |       console.log(error);
128 |       window.alert('Error parsing ruleset JSON');
129 |     }
130 |   };
131 |   reader.readAsText(rulesetFile);
132 | }
133 | 
134 | function rulesetFilesInputHandler(ev) {
135 |   ev.preventDefault();
136 |   let numFiles = 0;
137 |   let tempRulesetFiles = [];
138 |   let rulesetFiles = [];
139 | 
140 |   // Check if the files were dropped or selected from the file input
141 |   if (ev.dataTransfer) {
142 |     // Dropped files
143 |     tempRulesetFiles = ev.dataTransfer.items;
144 |   } else {
145 |     // Selected from file input
146 |     tempRulesetFiles = Array.from(ev.target.files);
147 |   }
148 | 
149 |   if (tempRulesetFiles.length != 0) {
150 |     numFiles = tempRulesetFiles.length;
151 |     if (numFiles < 1) {
152 |       window.alert('One or more files expected');
153 |       return;
154 |     }
155 |     for (let i = 0; i < numFiles; i++) {
156 |       if (tempRulesetFiles[i].kind === 'file') {
157 |         rulesetFiles.push(tempRulesetFiles[i].getAsFile());
158 |       } else {
159 |         rulesetFiles.push(tempRulesetFiles[i]);
160 |       }
161 |     }
162 |   } else {
163 |     tempRulesetFiles = ev.dataTransfer.files;
164 |     numFiles = tempRulesetFiles.length;
165 |     if (numFiles === 0) {
166 |       window.alert('One or more files expected');
167 |       return;
168 |     }
169 |     for (let i = 0; i < numFiles; i++) {
170 |       rulesetFiles.push(tempRulesetFiles[i]);
171 |     }
172 |   }
173 |   rulesetFileNames.value = rulesetFiles.map((file) => file.name).join(', ');
174 |   for (let i = 0; i < rulesetFiles.length; i++) {
175 |     parseRulesetFile(rulesetFiles[i]);
176 |   }
177 |   removeDragData(ev);
178 | }
179 | 
180 | function dragOverHandler(ev) {
181 |   ev.preventDefault();
182 | }
183 | 
184 | function removeDragData(ev) {
185 |   try {
186 |     if (ev.dataTransfer) {
187 |       ev.dataTransfer.items.clear();
188 |     } else {
189 |       ev.target.value = ''; // Clear the file input element
190 |     }
191 |   } catch (e) {
192 |     document.getElementById('manifest_file_input').value = '';
193 |     document.getElementById('ruleset_files_input').value = '';
194 |   }
195 | }
196 | </script>
197 | 
198 | <template>
199 |   <h2>Upload Extension Files</h2>
200 |   <FileUploadHeading>
201 |     <template #icon>
202 |       <ExtensionIcon />
203 |     </template>
204 |     <template #heading>Upload Manifest</template>
205 |     <label class="drop-zone-label">
206 |       <div
207 |         class="drop_zone"
208 |         id="manifest_drop_zone"
209 |         @drop="manifestInputHandler"
210 |         @dragover="dragOverHandler"
211 |       >
212 |         <p v-if="!manifestFileName">
213 |           Drag manifest.json file, or click to browse ...
214 |         </p>
215 |         <p v-else>{{ manifestFileName }}</p>
216 |         <input
217 |           type="file"
218 |           id="manifest_file_input"
219 |           @change="manifestInputHandler"
220 |         />
221 |       </div>
222 |     </label>
223 |   </FileUploadHeading>
224 |   <br />
225 |   <FileUploadHeading v-show="manifestFileName">
226 |     <template #icon>
227 |       <ExtensionIcon />
228 |     </template>
229 |     <template #heading>Upload Ruleset Files</template>
230 |     <label class="drop-zone-label">
231 |       <div
232 |         class="drop_zone"
233 |         id="ruleset_drop_zone"
234 |         @drop="rulesetFilesInputHandler"
235 |         @dragover="dragOverHandler"
236 |       >
237 |         <p v-if="rulesetFileNames === ''">
238 |           Drag one or more ruleset files, or click to browse...
239 |         </p>
240 |         <p v-else>{{ rulesetFileNames }}</p>
241 |         <input
242 |           type="file"
243 |           id="ruleset_files_input"
244 |           @change="rulesetFilesInputHandler"
245 |           multiple
246 |         />
247 |       </div>
248 |     </label>
249 |   </FileUploadHeading>
250 | </template>
251 | 
252 | <style scoped>
253 | .drop_zone {
254 |   border: dashed;
255 |   width: 200px;
256 |   height: 100px;
257 | }
258 | input[type='file'] {
259 |   display: none;
260 | }
261 | </style>
262 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
  1 | 
  2 |                                  Apache License
  3 |                            Version 2.0, January 2004
  4 |                         http://www.apache.org/licenses/
  5 | 
  6 |    TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
  7 | 
  8 |    1. Definitions.
  9 | 
 10 |       "License" shall mean the terms and conditions for use, reproduction,
 11 |       and distribution as defined by Sections 1 through 9 of this document.
 12 | 
 13 |       "Licensor" shall mean the copyright owner or entity authorized by
 14 |       the copyright owner that is granting the License.
 15 | 
 16 |       "Legal Entity" shall mean the union of the acting entity and all
 17 |       other entities that control, are controlled by, or are under common
 18 |       control with that entity. For the purposes of this definition,
 19 |       "control" means (i) the power, direct or indirect, to cause the
 20 |       direction or management of such entity, whether by contract or
 21 |       otherwise, or (ii) ownership of fifty percent (50%) or more of the
 22 |       outstanding shares, or (iii) beneficial ownership of such entity.
 23 | 
 24 |       "You" (or "Your") shall mean an individual or Legal Entity
 25 |       exercising permissions granted by this License.
 26 | 
 27 |       "Source" form shall mean the preferred form for making modifications,
 28 |       including but not limited to software source code, documentation
 29 |       source, and configuration files.
 30 | 
 31 |       "Object" form shall mean any form resulting from mechanical
 32 |       transformation or translation of a Source form, including but
 33 |       not limited to compiled object code, generated documentation,
 34 |       and conversions to other media types.
 35 | 
 36 |       "Work" shall mean the work of authorship, whether in Source or
 37 |       Object form, made available under the License, as indicated by a
 38 |       copyright notice that is included in or attached to the work
 39 |       (an example is provided in the Appendix below).
 40 | 
 41 |       "Derivative Works" shall mean any work, whether in Source or Object
 42 |       form, that is based on (or derived from) the Work and for which the
 43 |       editorial revisions, annotations, elaborations, or other modifications
 44 |       represent, as a whole, an original work of authorship. For the purposes
 45 |       of this License, Derivative Works shall not include works that remain
 46 |       separable from, or merely link (or bind by name) to the interfaces of,
 47 |       the Work and Derivative Works thereof.
 48 | 
 49 |       "Contribution" shall mean any work of authorship, including
 50 |       the original version of the Work and any modifications or additions
 51 |       to that Work or Derivative Works thereof, that is intentionally
 52 |       submitted to Licensor for inclusion in the Work by the copyright owner
 53 |       or by an individual or Legal Entity authorized to submit on behalf of
 54 |       the copyright owner. For the purposes of this definition, "submitted"
 55 |       means any form of electronic, verbal, or written communication sent
 56 |       to the Licensor or its representatives, including but not limited to
 57 |       communication on electronic mailing lists, source code control systems,
 58 |       and issue tracking systems that are managed by, or on behalf of, the
 59 |       Licensor for the purpose of discussing and improving the Work, but
 60 |       excluding communication that is conspicuously marked or otherwise
 61 |       designated in writing by the copyright owner as "Not a Contribution."
 62 | 
 63 |       "Contributor" shall mean Licensor and any individual or Legal Entity
 64 |       on behalf of whom a Contribution has been received by Licensor and
 65 |       subsequently incorporated within the Work.
 66 | 
 67 |    2. Grant of Copyright License. Subject to the terms and conditions of
 68 |       this License, each Contributor hereby grants to You a perpetual,
 69 |       worldwide, non-exclusive, no-charge, royalty-free, irrevocable
 70 |       copyright license to reproduce, prepare Derivative Works of,
 71 |       publicly display, publicly perform, sublicense, and distribute the
 72 |       Work and such Derivative Works in Source or Object form.
 73 | 
 74 |    3. Grant of Patent License. Subject to the terms and conditions of
 75 |       this License, each Contributor hereby grants to You a perpetual,
 76 |       worldwide, non-exclusive, no-charge, royalty-free, irrevocable
 77 |       (except as stated in this section) patent license to make, have made,
 78 |       use, offer to sell, sell, import, and otherwise transfer the Work,
 79 |       where such license applies only to those patent claims licensable
 80 |       by such Contributor that are necessarily infringed by their
 81 |       Contribution(s) alone or by combination of their Contribution(s)
 82 |       with the Work to which such Contribution(s) was submitted. If You
 83 |       institute patent litigation against any entity (including a
 84 |       cross-claim or counterclaim in a lawsuit) alleging that the Work
 85 |       or a Contribution incorporated within the Work constitutes direct
 86 |       or contributory patent infringement, then any patent licenses
 87 |       granted to You under this License for that Work shall terminate
 88 |       as of the date such litigation is filed.
 89 | 
 90 |    4. Redistribution. You may reproduce and distribute copies of the
 91 |       Work or Derivative Works thereof in any medium, with or without
 92 |       modifications, and in Source or Object form, provided that You
 93 |       meet the following conditions:
 94 | 
 95 |       (a) You must give any other recipients of the Work or
 96 |           Derivative Works a copy of this License; and
 97 | 
 98 |       (b) You must cause any modified files to carry prominent notices
 99 |           stating that You changed the files; and
100 | 
101 |       (c) You must retain, in the Source form of any Derivative Works
102 |           that You distribute, all copyright, patent, trademark, and
103 |           attribution notices from the Source form of the Work,
104 |           excluding those notices that do not pertain to any part of
105 |           the Derivative Works; and
106 | 
107 |       (d) If the Work includes a "NOTICE" text file as part of its
108 |           distribution, then any Derivative Works that You distribute must
109 |           include a readable copy of the attribution notices contained
110 |           within such NOTICE file, excluding those notices that do not
111 |           pertain to any part of the Derivative Works, in at least one
112 |           of the following places: within a NOTICE text file distributed
113 |           as part of the Derivative Works; within the Source form or
114 |           documentation, if provided along with the Derivative Works; or,
115 |           within a display generated by the Derivative Works, if and
116 |           wherever such third-party notices normally appear. The contents
117 |           of the NOTICE file are for informational purposes only and
118 |           do not modify the License. You may add Your own attribution
119 |           notices within Derivative Works that You distribute, alongside
120 |           or as an addendum to the NOTICE text from the Work, provided
121 |           that such additional attribution notices cannot be construed
122 |           as modifying the License.
123 | 
124 |       You may add Your own copyright statement to Your modifications and
125 |       may provide additional or different license terms and conditions
126 |       for use, reproduction, or distribution of Your modifications, or
127 |       for any such Derivative Works as a whole, provided Your use,
128 |       reproduction, and distribution of the Work otherwise complies with
129 |       the conditions stated in this License.
130 | 
131 |    5. Submission of Contributions. Unless You explicitly state otherwise,
132 |       any Contribution intentionally submitted for inclusion in the Work
133 |       by You to the Licensor shall be under the terms and conditions of
134 |       this License, without any additional terms or conditions.
135 |       Notwithstanding the above, nothing herein shall supersede or modify
136 |       the terms of any separate license agreement you may have executed
137 |       with Licensor regarding such Contributions.
138 | 
139 |    6. Trademarks. This License does not grant permission to use the trade
140 |       names, trademarks, service marks, or product names of the Licensor,
141 |       except as required for reasonable and customary use in describing the
142 |       origin of the Work and reproducing the content of the NOTICE file.
143 | 
144 |    7. Disclaimer of Warranty. Unless required by applicable law or
145 |       agreed to in writing, Licensor provides the Work (and each
146 |       Contributor provides its Contributions) on an "AS IS" BASIS,
147 |       WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
148 |       implied, including, without limitation, any warranties or conditions
149 |       of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
150 |       PARTICULAR PURPOSE. You are solely responsible for determining the
151 |       appropriateness of using or redistributing the Work and assume any
152 |       risks associated with Your exercise of permissions under this License.
153 | 
154 |    8. Limitation of Liability. In no event and under no legal theory,
155 |       whether in tort (including negligence), contract, or otherwise,
156 |       unless required by applicable law (such as deliberate and grossly
157 |       negligent acts) or agreed to in writing, shall any Contributor be
158 |       liable to You for damages, including any direct, indirect, special,
159 |       incidental, or consequential damages of any character arising as a
160 |       result of this License or out of the use or inability to use the
161 |       Work (including but not limited to damages for loss of goodwill,
162 |       work stoppage, computer failure or malfunction, or any and all
163 |       other commercial damages or losses), even if such Contributor
164 |       has been advised of the possibility of such damages.
165 | 
166 |    9. Accepting Warranty or Additional Liability. While redistributing
167 |       the Work or Derivative Works thereof, You may choose to offer,
168 |       and charge a fee for, acceptance of support, warranty, indemnity,
169 |       or other liability obligations and/or rights consistent with this
170 |       License. However, in accepting such obligations, You may act only
171 |       on Your own behalf and on Your sole responsibility, not on behalf
172 |       of any other Contributor, and only if You agree to indemnify,
173 |       defend, and hold each Contributor harmless for any liability
174 |       incurred by, or claims asserted against, such Contributor by reason
175 |       of your accepting any such warranty or additional liability.
176 | 
177 |    END OF TERMS AND CONDITIONS
178 | 
179 |    APPENDIX: How to apply the Apache License to your work.
180 | 
181 |       To apply the Apache License to your work, attach the following
182 |       boilerplate notice, with the fields enclosed by brackets "[]"
183 |       replaced with your own identifying information. (Don't include
184 |       the brackets!)  The text should be enclosed in the appropriate
185 |       comment syntax for the file format. We also recommend that a
186 |       file or class name and description of purpose be included on the
187 |       same "printed page" as the copyright notice for easier
188 |       identification within third-party archives.
189 | 
190 |    Copyright [yyyy] [name of copyright owner]
191 | 
192 |    Licensed under the Apache License, Version 2.0 (the "License");
193 |    you may not use this file except in compliance with the License.
194 |    You may obtain a copy of the License at
195 | 
196 |        http://www.apache.org/licenses/LICENSE-2.0
197 | 
198 |    Unless required by applicable law or agreed to in writing, software
199 |    distributed under the License is distributed on an "AS IS" BASIS,
200 |    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
201 |    See the License for the specific language governing permissions and
202 |    limitations under the License.
203 | 


--------------------------------------------------------------------------------