diff --git a/.env b/.env new file mode 100644 index 0000000..2d2e9a0 --- /dev/null +++ b/.env @@ -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 @@ - - - - React App + + Bookmark Arranger
- 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 @@ + + + + + + + Document + + +

Ola

+
+ + + + + \ 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); - } -} diff --git a/src/App.js b/src/App.js index ce9cbd2..adbdf16 100644 --- a/src/App.js +++ b/src/App.js @@ -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 ( -
-
- logo -

- Edit src/App.js and save to reload. -

- - Learn React - -
-
- ); + /* 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 ( +
+
+
+

DataTable - Sort

+

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.

+
+
+ +
+

Single Column

+ {/* + + + + + + +

Multiple Columns

+ + + + + + */} +
+
+ ); + } } 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(, document.getElementById('root')); diff --git a/yarn.lock b/yarn.lock index 25b6936..f4a0be4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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==