├── background.js ├── .gitignore ├── extension ├── build │ ├── robots.txt │ ├── favicon.ico │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ ├── asset-manifest.json │ └── index.html ├── public │ ├── robots.txt │ ├── favicon.ico │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── index.html ├── src │ ├── setupTests.js │ ├── App.test.js │ ├── App.js │ ├── index.css │ ├── reportWebVitals.js │ ├── main.js │ ├── index.js │ ├── App.css │ └── logo.svg ├── package.json └── README.md ├── images ├── get_started16.png ├── get_started32.png ├── get_started48.png └── get_started128.png ├── scripts └── changeBgColor.js ├── README.md ├── static ├── css │ ├── main.8c8b27cf.chunk.css │ └── main.8c8b27cf.chunk.css.map └── js │ ├── 2.66e3e056.chunk.js.LICENSE.txt │ ├── main.4c4ac8be.chunk.js │ ├── runtime-main.646f719c.js │ ├── main.4c4ac8be.chunk.js.map │ ├── 3.20b26823.chunk.js │ ├── 3.20b26823.chunk.js.map │ ├── runtime-main.646f719c.js.map │ └── 2.66e3e056.chunk.js └── manifest.json /background.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | /extension/node_modules 2 | /extension/.eslintcache -------------------------------------------------------------------------------- /extension/build/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /extension/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /images/get_started16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/onlyoneaman/chrome-extension-react/HEAD/images/get_started16.png -------------------------------------------------------------------------------- /images/get_started32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/onlyoneaman/chrome-extension-react/HEAD/images/get_started32.png -------------------------------------------------------------------------------- /images/get_started48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/onlyoneaman/chrome-extension-react/HEAD/images/get_started48.png -------------------------------------------------------------------------------- /images/get_started128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/onlyoneaman/chrome-extension-react/HEAD/images/get_started128.png -------------------------------------------------------------------------------- /extension/build/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/onlyoneaman/chrome-extension-react/HEAD/extension/build/favicon.ico -------------------------------------------------------------------------------- /extension/build/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/onlyoneaman/chrome-extension-react/HEAD/extension/build/logo192.png -------------------------------------------------------------------------------- /extension/build/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/onlyoneaman/chrome-extension-react/HEAD/extension/build/logo512.png -------------------------------------------------------------------------------- /extension/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/onlyoneaman/chrome-extension-react/HEAD/extension/public/favicon.ico -------------------------------------------------------------------------------- /extension/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/onlyoneaman/chrome-extension-react/HEAD/extension/public/logo192.png -------------------------------------------------------------------------------- /extension/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/onlyoneaman/chrome-extension-react/HEAD/extension/public/logo512.png -------------------------------------------------------------------------------- /scripts/changeBgColor.js: -------------------------------------------------------------------------------- 1 | chrome.storage.sync.get("color", ({ color }) => { 2 | document.body.style.backgroundColor = color; 3 | }); -------------------------------------------------------------------------------- /extension/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /extension/src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /extension/src/App.js: -------------------------------------------------------------------------------- 1 | import './App.css'; 2 | import { changeColor } from './main'; 3 | 4 | function App() { 5 | return ( 6 |
7 |
8 | 11 |
12 |
13 | ); 14 | } 15 | 16 | export default App; 17 | -------------------------------------------------------------------------------- /extension/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /extension/src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /extension/src/main.js: -------------------------------------------------------------------------------- 1 | /*global chrome*/ 2 | 3 | export async function changeColor() { 4 | chrome.storage.sync.set({color: "#3aa757"}, ()=>{}); 5 | 6 | await chrome.tabs.query({active: true, currentWindow: true}, 7 | ( 8 | r => { 9 | chrome.tabs.executeScript(r[0].id , {file: 'scripts/changeBgColor.js'}, function() { 10 | if(chrome.runtime.lastError) { 11 | console.error("Script injection failed: " + chrome.runtime.lastError.message); 12 | } 13 | }) 14 | } 15 | )); 16 | 17 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # chrome-extension-react 2 | ## A Chrome Extension in ReactJs 3 | The extension changes the background color of a webpage to green when clicked on button inside popup. 4 | 5 | Loading the extension 6 | - Clone the repo in your local system 7 | - open chrome://extensions 8 | - make sure that developer mode is turned on 9 | - click load unpacked and select the repo 10 | 11 | Follow the [blog](https://medium.com/javascript-in-plain-english/creating-a-chrome-extension-with-react-d92db20550cb) for steps on how to create this extension. 12 | 13 | -------------------------------------------------------------------------------- /extension/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | ReactDOM.render( 8 | 9 | 10 | , 11 | document.getElementById('root') 12 | ); 13 | 14 | // If you want to start measuring performance in your app, pass a function 15 | // to log results (for example: reportWebVitals(console.log)) 16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 17 | reportWebVitals(); 18 | -------------------------------------------------------------------------------- /extension/build/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /extension/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /extension/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /static/css/main.8c8b27cf.chunk.css: -------------------------------------------------------------------------------- 1 | body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,"Courier New",monospace}.App{text-align:center}.App-logo{height:40vmin;pointer-events:none}@media (prefers-reduced-motion:no-preference){.App-logo{animation:App-logo-spin 20s linear infinite}}.App-header{background-color:#282c34;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:calc(10px + 2vmin);color:#fff}.App-link{color:#61dafb}@keyframes App-logo-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}} 2 | /*# sourceMappingURL=main.8c8b27cf.chunk.css.map */ -------------------------------------------------------------------------------- /manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "BgColor Change", 3 | "name": "Change background color", 4 | "version": "1.0.0", 5 | "manifest_version": 2, 6 | "permissions": [ 7 | "storage", 8 | "tabs", 9 | "activeTab", 10 | "http://*/*", 11 | "https://*/*" 12 | ], 13 | "browser_action": { 14 | "default_popup": "extension/build/index.html", 15 | "default_icon": { 16 | "16": "/images/get_started16.png", 17 | "32": "/images/get_started32.png", 18 | "48": "/images/get_started48.png", 19 | "128": "/images/get_started128.png" 20 | } 21 | }, 22 | "icons": { 23 | "16": "/images/get_started16.png", 24 | "32": "/images/get_started32.png", 25 | "48": "/images/get_started48.png", 26 | "128": "/images/get_started128.png" 27 | }, 28 | "content_security_policy": "script-src 'self' 'sha256-fdAfMKZtCTRPKMRznGwonJHC++vCCrQS7XFnVrzSXAE=' 'sha256-YD8w9VLrdvqI5/tFVmpT+1337ly+e/JvPrkRxYZo/w4='; object-src 'self';" 29 | } 30 | -------------------------------------------------------------------------------- /extension/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "extension", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.11.4", 7 | "@testing-library/react": "^11.1.0", 8 | "@testing-library/user-event": "^12.1.10", 9 | "react": "^17.0.1", 10 | "react-dom": "^17.0.1", 11 | "react-scripts": "4.0.1", 12 | "web-vitals": "^0.2.4" 13 | }, 14 | "scripts": { 15 | "start": "react-scripts start", 16 | "build": "react-scripts build", 17 | "test": "react-scripts test", 18 | "eject": "react-scripts eject", 19 | "move": "yarn build && rm -rf ../static && mv build/static ../static" 20 | }, 21 | "eslintConfig": { 22 | "extends": [ 23 | "react-app", 24 | "react-app/jest" 25 | ] 26 | }, 27 | "browserslist": { 28 | "production": [ 29 | ">0.2%", 30 | "not dead", 31 | "not op_mini all" 32 | ], 33 | "development": [ 34 | "last 1 chrome version", 35 | "last 1 firefox version", 36 | "last 1 safari version" 37 | ] 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /extension/build/asset-manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": { 3 | "main.css": "/static/css/main.8c8b27cf.chunk.css", 4 | "main.js": "/static/js/main.4c4ac8be.chunk.js", 5 | "main.js.map": "/static/js/main.4c4ac8be.chunk.js.map", 6 | "runtime-main.js": "/static/js/runtime-main.646f719c.js", 7 | "runtime-main.js.map": "/static/js/runtime-main.646f719c.js.map", 8 | "static/js/2.66e3e056.chunk.js": "/static/js/2.66e3e056.chunk.js", 9 | "static/js/2.66e3e056.chunk.js.map": "/static/js/2.66e3e056.chunk.js.map", 10 | "static/js/3.20b26823.chunk.js": "/static/js/3.20b26823.chunk.js", 11 | "static/js/3.20b26823.chunk.js.map": "/static/js/3.20b26823.chunk.js.map", 12 | "index.html": "/index.html", 13 | "static/css/main.8c8b27cf.chunk.css.map": "/static/css/main.8c8b27cf.chunk.css.map", 14 | "static/js/2.66e3e056.chunk.js.LICENSE.txt": "/static/js/2.66e3e056.chunk.js.LICENSE.txt" 15 | }, 16 | "entrypoints": [ 17 | "static/js/runtime-main.646f719c.js", 18 | "static/js/2.66e3e056.chunk.js", 19 | "static/css/main.8c8b27cf.chunk.css", 20 | "static/js/main.4c4ac8be.chunk.js" 21 | ] 22 | } -------------------------------------------------------------------------------- /static/js/2.66e3e056.chunk.js.LICENSE.txt: -------------------------------------------------------------------------------- 1 | /* 2 | object-assign 3 | (c) Sindre Sorhus 4 | @license MIT 5 | */ 6 | 7 | /** @license React v0.20.1 8 | * scheduler.production.min.js 9 | * 10 | * Copyright (c) Facebook, Inc. and its affiliates. 11 | * 12 | * This source code is licensed under the MIT license found in the 13 | * LICENSE file in the root directory of this source tree. 14 | */ 15 | 16 | /** @license React v17.0.1 17 | * react-dom.production.min.js 18 | * 19 | * Copyright (c) Facebook, Inc. and its affiliates. 20 | * 21 | * This source code is licensed under the MIT license found in the 22 | * LICENSE file in the root directory of this source tree. 23 | */ 24 | 25 | /** @license React v17.0.1 26 | * react-jsx-runtime.production.min.js 27 | * 28 | * Copyright (c) Facebook, Inc. and its affiliates. 29 | * 30 | * This source code is licensed under the MIT license found in the 31 | * LICENSE file in the root directory of this source tree. 32 | */ 33 | 34 | /** @license React v17.0.1 35 | * react.production.min.js 36 | * 37 | * Copyright (c) Facebook, Inc. and its affiliates. 38 | * 39 | * This source code is licensed under the MIT license found in the 40 | * LICENSE file in the root directory of this source tree. 41 | */ 42 | -------------------------------------------------------------------------------- /static/js/main.4c4ac8be.chunk.js: -------------------------------------------------------------------------------- 1 | (this.webpackJsonpextension=this.webpackJsonpextension||[]).push([[0],{11:function(e,n,t){},12:function(e,n,t){},14:function(e,n,t){"use strict";t.r(n);var r=t(0),c=t(1),o=t.n(c),i=t(4),s=t.n(i),a=(t(11),t(12),t(3)),u=t.n(a),h=t(5);function l(){return p.apply(this,arguments)}function p(){return(p=Object(h.a)(u.a.mark((function e(){return u.a.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return chrome.storage.sync.set({color:"#3aa757"},(function(){})),e.next=3,chrome.tabs.query({active:!0,currentWindow:!0},(function(e){chrome.tabs.executeScript(e[0].id,{file:"scripts/changeBgColor.js"},(function(){chrome.runtime.lastError&&console.error("Script injection failed: "+chrome.runtime.lastError.message)}))}));case 3:case"end":return e.stop()}}),e)})))).apply(this,arguments)}var f=function(){return Object(r.jsx)("div",{className:"App",children:Object(r.jsx)("header",{className:"App-header",children:Object(r.jsx)("button",{onClick:l,children:"Change color"})})})},d=function(e){e&&e instanceof Function&&t.e(3).then(t.bind(null,15)).then((function(n){var t=n.getCLS,r=n.getFID,c=n.getFCP,o=n.getLCP,i=n.getTTFB;t(e),r(e),c(e),o(e),i(e)}))};s.a.render(Object(r.jsx)(o.a.StrictMode,{children:Object(r.jsx)(f,{})}),document.getElementById("root")),d()}},[[14,1,2]]]); 2 | //# sourceMappingURL=main.4c4ac8be.chunk.js.map -------------------------------------------------------------------------------- /static/css/main.8c8b27cf.chunk.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["webpack://src/index.css","webpack://src/App.css"],"names":[],"mappings":"AAAA,KACE,QAAS,CACT,mJAEY,CACZ,kCAAmC,CACnC,iCACF,CAEA,KACE,yEAEF,CCZA,KACE,iBACF,CAEA,UACE,aAAc,CACd,mBACF,CAEA,8CACE,UACE,2CACF,CACF,CAEA,YACE,wBAAyB,CACzB,gBAAiB,CACjB,YAAa,CACb,qBAAsB,CACtB,kBAAmB,CACnB,sBAAuB,CACvB,4BAA6B,CAC7B,UACF,CAEA,UACE,aACF,CAEA,yBACE,GACE,sBACF,CACA,GACE,uBACF,CACF","file":"main.8c8b27cf.chunk.css","sourcesContent":["body {\n margin: 0;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',\n 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',\n sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\ncode {\n font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',\n monospace;\n}\n",".App {\n text-align: center;\n}\n\n.App-logo {\n height: 40vmin;\n pointer-events: none;\n}\n\n@media (prefers-reduced-motion: no-preference) {\n .App-logo {\n animation: App-logo-spin infinite 20s linear;\n }\n}\n\n.App-header {\n background-color: #282c34;\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n font-size: calc(10px + 2vmin);\n color: white;\n}\n\n.App-link {\n color: #61dafb;\n}\n\n@keyframes App-logo-spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n"]} -------------------------------------------------------------------------------- /extension/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /static/js/runtime-main.646f719c.js: -------------------------------------------------------------------------------- 1 | !function(e){function t(t){for(var n,i,a=t[0],c=t[1],l=t[2],s=0,p=[];s -------------------------------------------------------------------------------- /static/js/main.4c4ac8be.chunk.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["main.js","App.js","reportWebVitals.js","index.js"],"names":["changeColor","a","chrome","storage","sync","set","color","tabs","query","active","currentWindow","r","executeScript","id","file","runtime","lastError","console","error","message","App","className","onClick","reportWebVitals","onPerfEntry","Function","then","getCLS","getFID","getFCP","getLCP","getTTFB","ReactDOM","render","StrictMode","document","getElementById"],"mappings":"wOAEO,SAAeA,IAAtB,+B,4CAAO,sBAAAC,EAAA,6DACLC,OAAOC,QAAQC,KAAKC,IAAI,CAACC,MAAO,YAAY,eADvC,SAKCJ,OAAOK,KAAKC,MAAM,CAACC,QAAQ,EAAMC,eAAe,IAElD,SAAAC,GACAT,OAAOK,KAAKK,cAAcD,EAAE,GAAGE,GAAK,CAACC,KAAM,6BAA6B,WACnEZ,OAAOa,QAAQC,WAChBC,QAAQC,MAAM,4BAA8BhB,OAAOa,QAAQC,UAAUG,eAVxE,4C,sBCaQC,MAZf,WACE,OACE,qBAAKC,UAAU,MAAf,SACE,wBAAQA,UAAU,aAAlB,SACE,wBAAQC,QAAStB,EAAjB,+BCKOuB,EAZS,SAAAC,GAClBA,GAAeA,aAAuBC,UACxC,6BAAqBC,MAAK,YAAkD,IAA/CC,EAA8C,EAA9CA,OAAQC,EAAsC,EAAtCA,OAAQC,EAA8B,EAA9BA,OAAQC,EAAsB,EAAtBA,OAAQC,EAAc,EAAdA,QAC3DJ,EAAOH,GACPI,EAAOJ,GACPK,EAAOL,GACPM,EAAON,GACPO,EAAQP,OCDdQ,IAASC,OACP,cAAC,IAAMC,WAAP,UACE,cAAC,EAAD,MAEFC,SAASC,eAAe,SAM1Bb,M","file":"static/js/main.4c4ac8be.chunk.js","sourcesContent":["/*global chrome*/\n\nexport async function changeColor() {\n chrome.storage.sync.set({color: \"#3aa757\"}, ()=>{}/* { color }) => {\n console.log(color)\n } */ );\n\n await chrome.tabs.query({active: true, currentWindow: true}, \n (\n r => {\n chrome.tabs.executeScript(r[0].id , {file: 'scripts/changeBgColor.js'}, function() {\n if(chrome.runtime.lastError) {\n console.error(\"Script injection failed: \" + chrome.runtime.lastError.message);\n }\n })\n }\n ));\n \n}","import './App.css';\nimport { changeColor } from './main';\n\nfunction App() {\n return (\n
\n
\n \n
\n
\n );\n}\n\nexport default App;\n","const reportWebVitals = onPerfEntry => {\n if (onPerfEntry && onPerfEntry instanceof Function) {\n import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {\n getCLS(onPerfEntry);\n getFID(onPerfEntry);\n getFCP(onPerfEntry);\n getLCP(onPerfEntry);\n getTTFB(onPerfEntry);\n });\n }\n};\n\nexport default reportWebVitals;\n","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport './index.css';\nimport App from './App';\nimport reportWebVitals from './reportWebVitals';\n\nReactDOM.render(\n \n \n ,\n document.getElementById('root')\n);\n\n// If you want to start measuring performance in your app, pass a function\n// to log results (for example: reportWebVitals(console.log))\n// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals\nreportWebVitals();\n"],"sourceRoot":""} -------------------------------------------------------------------------------- /extension/build/index.html: -------------------------------------------------------------------------------- 1 | React App
-------------------------------------------------------------------------------- /static/js/3.20b26823.chunk.js: -------------------------------------------------------------------------------- 1 | (this.webpackJsonpextension=this.webpackJsonpextension||[]).push([[3],{15:function(t,n,e){"use strict";e.r(n),e.d(n,"getCLS",(function(){return v})),e.d(n,"getFCP",(function(){return g})),e.d(n,"getFID",(function(){return h})),e.d(n,"getLCP",(function(){return y})),e.d(n,"getTTFB",(function(){return F}));var i,a,r=function(){return"".concat(Date.now(),"-").concat(Math.floor(8999999999999*Math.random())+1e12)},o=function(t){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:-1;return{name:t,value:n,delta:0,entries:[],id:r(),isFinal:!1}},u=function(t,n){try{if(PerformanceObserver.supportedEntryTypes.includes(t)){var e=new PerformanceObserver((function(t){return t.getEntries().map(n)}));return e.observe({type:t,buffered:!0}),e}}catch(t){}},s=!1,c=!1,d=function(t){s=!t.persisted},f=function(){addEventListener("pagehide",d),addEventListener("beforeunload",(function(){}))},p=function(t){var n=arguments.length>1&&void 0!==arguments[1]&&arguments[1];c||(f(),c=!0),addEventListener("visibilitychange",(function(n){var e=n.timeStamp;"hidden"===document.visibilityState&&t({timeStamp:e,isUnloading:s})}),{capture:!0,once:n})},l=function(t,n,e,i){var a;return function(){e&&n.isFinal&&e.disconnect(),n.value>=0&&(i||n.isFinal||"hidden"===document.visibilityState)&&(n.delta=n.value-(a||0),(n.delta||n.isFinal||void 0===a)&&(t(n),a=n.value))}},v=function(t){var n,e=arguments.length>1&&void 0!==arguments[1]&&arguments[1],i=o("CLS",0),a=function(t){t.hadRecentInput||(i.value+=t.value,i.entries.push(t),n())},r=u("layout-shift",a);r&&(n=l(t,i,r,e),p((function(t){var e=t.isUnloading;r.takeRecords().map(a),e&&(i.isFinal=!0),n()})))},m=function(){return void 0===i&&(i="hidden"===document.visibilityState?0:1/0,p((function(t){var n=t.timeStamp;return i=n}),!0)),{get timeStamp(){return i}}},g=function(t){var n,e=o("FCP"),i=m(),a=u("paint",(function(t){"first-contentful-paint"===t.name&&t.startTime1&&void 0!==arguments[1]&&arguments[1],i=o("LCP"),a=m(),r=function(t){var e=t.startTime;e1&&void 0!==arguments[1]?arguments[1]:-1;return{name:t,value:n,delta:0,entries:[],id:e(),isFinal:!1}},a=function(t,n){try{if(PerformanceObserver.supportedEntryTypes.includes(t)){var e=new PerformanceObserver((function(t){return t.getEntries().map(n)}));return e.observe({type:t,buffered:!0}),e}}catch(t){}},r=!1,o=!1,s=function(t){r=!t.persisted},u=function(){addEventListener(\"pagehide\",s),addEventListener(\"beforeunload\",(function(){}))},c=function(t){var n=arguments.length>1&&void 0!==arguments[1]&&arguments[1];o||(u(),o=!0),addEventListener(\"visibilitychange\",(function(n){var e=n.timeStamp;\"hidden\"===document.visibilityState&&t({timeStamp:e,isUnloading:r})}),{capture:!0,once:n})},l=function(t,n,e,i){var a;return function(){e&&n.isFinal&&e.disconnect(),n.value>=0&&(i||n.isFinal||\"hidden\"===document.visibilityState)&&(n.delta=n.value-(a||0),(n.delta||n.isFinal||void 0===a)&&(t(n),a=n.value))}},p=function(t){var n,e=arguments.length>1&&void 0!==arguments[1]&&arguments[1],r=i(\"CLS\",0),o=function(t){t.hadRecentInput||(r.value+=t.value,r.entries.push(t),n())},s=a(\"layout-shift\",o);s&&(n=l(t,r,s,e),c((function(t){var e=t.isUnloading;s.takeRecords().map(o),e&&(r.isFinal=!0),n()})))},d=function(){return void 0===t&&(t=\"hidden\"===document.visibilityState?0:1/0,c((function(n){var e=n.timeStamp;return t=e}),!0)),{get timeStamp(){return t}}},v=function(t){var n,e=i(\"FCP\"),r=d(),o=a(\"paint\",(function(t){\"first-contentful-paint\"===t.name&&t.startTime1&&void 0!==arguments[1]&&arguments[1],r=i(\"LCP\"),o=d(),s=function(t){var e=t.startTime;e