diff options
| -rw-r--r-- | .env | 1 | ||||
| -rw-r--r-- | package.json | 6 | ||||
| -rw-r--r-- | public/background.js | 24 | ||||
| -rw-r--r-- | public/content_script.js | 27 | ||||
| -rw-r--r-- | public/index.html | 26 | ||||
| -rw-r--r-- | public/manifest.json | 28 | ||||
| -rw-r--r-- | public/page.html | 16 | ||||
| -rw-r--r-- | src/App.css | 33 | ||||
| -rw-r--r-- | src/App.js | 77 | ||||
| -rw-r--r-- | src/index.js | 3 | ||||
| -rw-r--r-- | yarn.lock | 43 |
11 files changed, 190 insertions, 94 deletions
@@ -0,0 +1 @@ +INLINE_RUNTIME_CHUNK=false
\ No newline at end of file diff --git a/package.json b/package.json index 259b759..ce0b14c 100644 --- a/package.json +++ b/package.json @@ -3,9 +3,13 @@ "version": "0.1.0", "private": true, "dependencies": { + "classnames": "^2.2.6", + "primeicons": "^1.0.0", + "primereact": "^3.1.7", "react": "^16.8.6", "react-dom": "^16.8.6", - "react-scripts": "3.0.1" + "react-scripts": "3.0.1", + "react-transition-group": "^4.2.1" }, "scripts": { "start": "react-scripts start", diff --git a/public/background.js b/public/background.js new file mode 100644 index 0000000..f94c039 --- /dev/null +++ b/public/background.js @@ -0,0 +1,24 @@ + + +chrome.browserAction.onClicked.addListener( (tab) =>{ + chrome.tabs.create({ 'url': chrome.extension.getURL('index.html') }, (tab) => { + + }); +}); + + +chrome.runtime.onConnect.addListener(port => { + port.onMessage.addListener(message => { + /* Perform an action if the message meets our criteria */ + if (message.code === "getBookMarks") { + getBookMarks(port) + } + }) +}); + +getBookMarks = (port) => { + chrome.bookmarks.getTree(function (data) { + port.postMessage({ bookMarkData: data}) + }); + +}
\ No newline at end of file diff --git a/public/content_script.js b/public/content_script.js new file mode 100644 index 0000000..612ecf5 --- /dev/null +++ b/public/content_script.js @@ -0,0 +1,27 @@ +(function(){ + + /* Open port on popup file */ + const port = chrome.runtime.connect({ + name: "bookmarkArranger" + }); + + /* Listen for messages on the port */ + port.onMessage.addListener(message => { + console.log(message) + }); + + document.getElementById('sendMessage').addEventListener('click', ()=>{ + /* Send a message through the port */ + port.postMessage({ + code: "getBookMarks" + }); + }) + + + + +})(); + + + + diff --git a/public/index.html b/public/index.html index dd1ccfd..4c5a273 100644 --- a/public/index.html +++ b/public/index.html @@ -5,34 +5,12 @@ <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="theme-color" content="#000000" /> - <!-- - manifest.json provides metadata used when your web app is installed on a - user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/ - --> - <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> - <!-- - Notice the use of %PUBLIC_URL% in the tags above. - It will be replaced with the URL of the `public` folder during the build. - Only files inside the `public` folder can be referenced from the HTML. - Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will - work correctly both with client-side routing and a non-root public URL. - Learn how to configure a non-root public URL by running `npm run build`. - --> - <title>React App</title> + <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> + <title>Bookmark Arranger</title> </head> <body> <noscript>You need to enable JavaScript to run this app.</noscript> <div id="root"></div> - <!-- - This HTML file is a template. - If you open it directly in the browser, you will see an empty page. - - You can add webfonts, meta tags, or analytics to this file. - The build step will place the bundled scripts into the <body> tag. - - To begin the development, run `npm start` or `yarn start`. - To create a production bundle, use `npm run build` or `yarn build`. - --> </body> </html> diff --git a/public/manifest.json b/public/manifest.json index 1f2f141..72678e3 100644 --- a/public/manifest.json +++ b/public/manifest.json @@ -1,15 +1,17 @@ { - "short_name": "React App", - "name": "Create React App Sample", - "icons": [ - { - "src": "favicon.ico", - "sizes": "64x64 32x32 24x24 16x16", - "type": "image/x-icon" - } + "short_name": "Bookmark Arranger", + "name": "Bookmark Arranger", + "version": "1.0", + "description": "Bookmark Arrange", + "manifest_version": 2, + "background": { + "scripts": [ + "background.js" + ], + "persistent": false + }, + "permissions": [ + "bookmarks" ], - "start_url": ".", - "display": "standalone", - "theme_color": "#000000", - "background_color": "#ffffff" -} + "browser_action": {} +}
\ No newline at end of file diff --git a/public/page.html b/public/page.html new file mode 100644 index 0000000..66f4a9d --- /dev/null +++ b/public/page.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <meta http-equiv="X-UA-Compatible" content="ie=edge"> + <title>Document</title> +</head> +<body> + <h2>Ola</h2> + <div id="renderArea"></div> + <button id="sendMessage">Send Message</button> + + <script src="./content_script.js"></script> +</body> +</html>
\ No newline at end of file diff --git a/src/App.css b/src/App.css index b41d297..e69de29 100644 --- a/src/App.css +++ b/src/App.css @@ -1,33 +0,0 @@ -.App { - text-align: center; -} - -.App-logo { - animation: App-logo-spin infinite 20s linear; - height: 40vmin; - pointer-events: none; -} - -.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: white; -} - -.App-link { - color: #61dafb; -} - -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} @@ -1,26 +1,61 @@ +/*global chrome*/ import React from 'react'; -import logo from './logo.svg'; -import './App.css'; +import { DataTable } from 'primereact/datatable'; +import { Column } from 'primereact/column'; +class App extends React.Component { -function App() { - return ( - <div className="App"> - <header className="App-header"> - <img src={logo} className="App-logo" alt="logo" /> - <p> - Edit <code>src/App.js</code> and save to reload. - </p> - <a - className="App-link" - href="https://reactjs.org" - target="_blank" - rel="noopener noreferrer" - > - Learn React - </a> - </header> - </div> - ); + /* Open port on popup file */ + port = chrome.runtime.connect({ + name: "bookmarkArranger" + }); + + getBookMarks = () => { + this.port.postMessage({ + code: "getBookMarks" + }); + } + + listenMessages = () => { + this.port.onMessage.addListener(message => { + console.log(message) + }); + } + + componentDidMount(){ + this.listenMessages(); + } + + render(){ + return ( + <div> + <div className="content-section introduction"> + <div className="feature-intro"> + <h1>DataTable - Sort</h1> + <p>Enabling sortable property on a column is enough to make a column sortable. Multiple column sorting is enabled using sortMode property and + used with metaKey.</p> + </div> + </div> + + <div className="content-section implementation"> + <h3>Single Column</h3> + {/* <DataTable value={this.state.cars}> + <Column field="vin" header="Vin" sortable={true} /> + <Column field="year" header="Year" sortable={true} /> + <Column field="brand" header="Brand" sortable={true} /> + <Column field="color" header="Color" sortable={true} /> + </DataTable> + + <h3>Multiple Columns</h3> + <DataTable value={this.state.cars} sortMode="multiple"> + <Column field="vin" header="Vin" sortable={true} /> + <Column field="year" header="Year" sortable={true} /> + <Column field="brand" header="Brand" sortable={true} /> + <Column field="color" header="Color" sortable={true} /> + </DataTable> */} + </div> + </div> + ); + } } export default App; diff --git a/src/index.js b/src/index.js index 87d1be5..eb72966 100644 --- a/src/index.js +++ b/src/index.js @@ -3,6 +3,9 @@ import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import * as serviceWorker from './serviceWorker'; +import 'primereact/resources/themes/nova-light/theme.css'; +import 'primereact/resources/primereact.min.css'; +import 'primeicons/primeicons.css'; ReactDOM.render(<App />, document.getElementById('root')); @@ -859,6 +859,13 @@ dependencies: regenerator-runtime "^0.13.2" +"@babel/runtime@^7.1.2", "@babel/runtime@^7.4.5": + version "7.5.4" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.5.4.tgz#cb7d1ad7c6d65676e66b47186577930465b5271b" + integrity sha512-Na84uwyImZZc3FKf4aUF1tysApzwf3p2yuFBIyBfbzT5glzKTdvYI4KVW4kcgjrzoGUjC7w3YyCHcJKaRxsr2Q== + dependencies: + regenerator-runtime "^0.13.2" + "@babel/template@^7.1.0", "@babel/template@^7.4.0", "@babel/template@^7.4.4": version "7.4.4" resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.4.4.tgz#f4b88d1225689a08f5bc3a17483545be9e4ed237" @@ -2421,6 +2428,11 @@ class-utils@^0.3.5: isobject "^3.0.0" static-extend "^0.1.1" +classnames@^2.2.6: + version "2.2.6" + resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce" + integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q== + clean-css@4.2.x: version "4.2.1" resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.2.1.tgz#2d411ef76b8569b6d0c84068dabe85b0aa5e5c17" @@ -3257,6 +3269,13 @@ dom-converter@^0.2: dependencies: utila "~0.4" +dom-helpers@^3.4.0: + version "3.4.0" + resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.4.0.tgz#e9b369700f959f62ecde5a6babde4bccd9169af8" + integrity sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA== + dependencies: + "@babel/runtime" "^7.1.2" + dom-serializer@0: version "0.1.1" resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.1.1.tgz#1ec4059e284babed36eec2941d4a970a189ce7c0" @@ -7605,6 +7624,16 @@ pretty-format@^24.8.0: ansi-styles "^3.2.0" react-is "^16.8.4" +primeicons@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/primeicons/-/primeicons-1.0.0.tgz#90061f168ef6227f21f0a7db8204ffa85cd27aec" + integrity sha512-p/hzIjUVccW4eJPhuORHI3AUkDpqfvCQVrjxbFEejnTEdWY4C8fomVfjiaA9jCu83fSQnBHuRIGB96iAR8R6uA== + +primereact@^3.1.7: + version "3.1.7" + resolved "https://registry.yarnpkg.com/primereact/-/primereact-3.1.7.tgz#218b04cb9e087ad59bdd8fb160ad936d99433c8b" + integrity sha512-adRKXQ95WiWBRdzlIxiZdjhNkZIbSkgkw95K12+pcK9QqjKPBJXP9HfJgdRrY4p/BaqbEdpm99kFWBp7JFLusQ== + private@^0.1.6: version "0.1.8" resolved "https://registry.yarnpkg.com/private/-/private-0.1.8.tgz#2381edb3689f7a53d653190060fcf822d2f368ff" @@ -7846,7 +7875,7 @@ react-dev-utils@^9.0.1: strip-ansi "5.2.0" text-table "0.2.0" -react-dom@16.8.6: +react-dom@^16.8.6: version "16.8.6" resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.8.6.tgz#71d6303f631e8b0097f56165ef608f051ff6e10f" integrity sha512-1nL7PIq9LTL3fthPqwkvr2zY7phIPjYrT0jp4HjyEQrEROnw4dG41VVwi/wfoCneoleqrNX7iAD+pXebJZwrwA== @@ -7926,7 +7955,17 @@ react-scripts@3.0.1: optionalDependencies: fsevents "2.0.6" -react@16.8.6: +react-transition-group@^4.2.1: + version "4.2.1" + resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.2.1.tgz#61fc9e36568bff9a1fe4e60fae323c8a6dbc0680" + integrity sha512-IXrPr93VzCPupwm2O6n6C2kJIofJ/Rp5Ltihhm9UfE8lkuVX2ng/SUUl/oWjblybK9Fq2Io7LGa6maVqPB762Q== + dependencies: + "@babel/runtime" "^7.4.5" + dom-helpers "^3.4.0" + loose-envify "^1.4.0" + prop-types "^15.6.2" + +react@^16.8.6: version "16.8.6" resolved "https://registry.yarnpkg.com/react/-/react-16.8.6.tgz#ad6c3a9614fd3a4e9ef51117f54d888da01f2bbe" integrity sha512-pC0uMkhLaHm11ZSJULfOBqV4tIZkx87ZLvbbQYunNixAAvjnC+snJCg0XQXn9VIsttVsbZP/H/ewzgsd5fxKXw== |