diff --git a/dist/extension/iframe/iframe.css b/dist/extension/iframe/iframe.css
deleted file mode 100644
index 9547175a15..0000000000
--- a/dist/extension/iframe/iframe.css
+++ /dev/null
@@ -1 +0,0 @@
-body { width: 400px; height: 800px; }
\ No newline at end of file
diff --git a/dist/extension/iframe/iframe.js b/dist/extension/iframe/iframe.js
deleted file mode 100644
index f1eeb0348c..0000000000
--- a/dist/extension/iframe/iframe.js
+++ /dev/null
@@ -1,2 +0,0 @@
-(() => {
-})();
\ No newline at end of file
diff --git a/dist/extension/iframe/index.html b/dist/extension/iframe/index.html
index 1697c97945..152adfb788 100644
--- a/dist/extension/iframe/index.html
+++ b/dist/extension/iframe/index.html
@@ -1,10 +1,10 @@
-
+
+ Anytype Web Clipper
-
\ No newline at end of file
diff --git a/dist/extension/js/background.js b/dist/extension/js/background.js
index 14ea6c4088..9880f75562 100644
--- a/dist/extension/js/background.js
+++ b/dist/extension/js/background.js
@@ -45,8 +45,8 @@
};
chrome.contextMenus.create({
- id: 'workTime',
- title: 'WorkTime',
+ id: 'webclipper',
+ title: 'Anytype Web Clipper',
contexts: [ 'selection' ]
});
diff --git a/dist/extension/js/foreground.js b/dist/extension/js/foreground.js
new file mode 100644
index 0000000000..f4a421e7fa
--- /dev/null
+++ b/dist/extension/js/foreground.js
@@ -0,0 +1,26 @@
+(() => {
+
+ const body = document.querySelector('body');
+ const iframe = document.createElement('iframe');
+
+ if (body && !document.getElementById(iframe.id)) {
+ body.appendChild(iframe);
+ };
+
+ iframe.id = 'anytypeWebclipper-iframe';
+ iframe.src = chrome.runtime.getURL('iframe/index.html');
+ iframe.style.position = 'fixed';
+ iframe.style.zIndex = 100000;
+ iframe.style.width = '800px';
+ iframe.style.height = '600px';
+ iframe.style.background = '#fff';
+ iframe.style.borderRadius = '12px';
+ iframe.style.left = '50%';
+ iframe.style.top = '50%';
+ iframe.style.marginTop = '-300px';
+ iframe.style.marginLeft = '-400px';
+ iframe.style.border = 0;
+ iframe.style.boxShadow = '0px 2px 28px rgba(0, 0, 0, 0.2)';
+ iframe.style.display = 'none';
+
+})();
\ No newline at end of file
diff --git a/dist/extension/manifest.json b/dist/extension/manifest.json
index 9d20e847fd..286c408c97 100644
--- a/dist/extension/manifest.json
+++ b/dist/extension/manifest.json
@@ -24,7 +24,7 @@
},
"content_scripts": [
{
- "js": [ "js/main.js" ],
+ "js": [ "js/foreground.js" ],
"matches": [ "" ]
}
],
diff --git a/dist/extension/popup/index.html b/dist/extension/popup/index.html
index 9d6e77304e..152adfb788 100644
--- a/dist/extension/popup/index.html
+++ b/dist/extension/popup/index.html
@@ -1,10 +1,10 @@
-
+
+ Anytype Web Clipper
-
\ No newline at end of file
diff --git a/dist/extension/popup/popup.css b/dist/extension/popup/popup.css
deleted file mode 100644
index 9547175a15..0000000000
--- a/dist/extension/popup/popup.css
+++ /dev/null
@@ -1 +0,0 @@
-body { width: 400px; height: 800px; }
\ No newline at end of file
diff --git a/dist/extension/popup/popup.js b/dist/extension/popup/popup.js
deleted file mode 100644
index f1eeb0348c..0000000000
--- a/dist/extension/popup/popup.js
+++ /dev/null
@@ -1,2 +0,0 @@
-(() => {
-})();
\ No newline at end of file
diff --git a/extension/entry.tsx b/extension/entry.tsx
index a94813758e..cfdef244a1 100644
--- a/extension/entry.tsx
+++ b/extension/entry.tsx
@@ -2,27 +2,29 @@ import * as React from 'react';
import * as ReactDOM from 'react-dom';
import $ from 'jquery';
import Popup from './popup';
-import Foreground from './foreground';
import Iframe from './iframe';
import Util from './lib/util';
import Extension from 'json/extension.json';
-const rootId = `${Extension.clipper.prefix}-root`;
+import './scss/common.scss';
+
+let rootId = '';
+let component: any = null;
+
+if (Util.isPopup()) {
+ rootId = `${Extension.clipper.prefix}-popup`;
+ component = ;
+} else
+if (Util.isIframe()) {
+ rootId = `${Extension.clipper.prefix}-iframe`;
+ component = ;
+};
+
const body = $('body');
const root = $(``);
if (!$(`#${rootId}`).length) {
- body.append(root);
-};
-
-let component: any = null;
-if (Util.isPopup()) {
- component = ;
-} else
-if (Util.isIframe()) {
- component = ;
-} else {
- component = ;
+ body.append(root).addClass(rootId);
};
ReactDOM.render(component, root.get(0));
\ No newline at end of file
diff --git a/extension/foreground.tsx b/extension/foreground.tsx
deleted file mode 100644
index e7f2134efd..0000000000
--- a/extension/foreground.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import * as React from 'react';
-
-class Foreground extends React.Component {
-
- render () {
- /* @ts-ignore */
- const url = chrome.runtime.getURL('iframe/index.html');
- const style: any = {
- position: 'fixed',
- zIndex: 10000,
- width: 800,
- height: 600,
- background: '#fff',
- borderRadius: 12,
- left: '50%',
- top: '50%',
- marginTop: -300,
- marginLeft: -400,
- border: 0,
- boxShadow: '0px 2px 28px rgba(0, 0, 0, 0.2)',
- };
-
- return (
-
- );
- };
-
-};
-
-export default Foreground;
\ No newline at end of file
diff --git a/extension/iframe.tsx b/extension/iframe.tsx
index cff878dfc0..f38c355488 100644
--- a/extension/iframe.tsx
+++ b/extension/iframe.tsx
@@ -9,6 +9,8 @@ import { commonStore, authStore, blockStore, detailStore, dbStore, menuStore, po
import Index from './iframe/index';
import Util from './lib/util';
+require('./scss/iframe.scss');
+
configure({ enforceActions: 'never' });
const Routes = [
diff --git a/extension/popup.tsx b/extension/popup.tsx
index f60c13ad0c..d4b60f4f6a 100644
--- a/extension/popup.tsx
+++ b/extension/popup.tsx
@@ -9,6 +9,8 @@ import { commonStore, authStore, blockStore, detailStore, dbStore, menuStore, po
import Index from './popup/index';
import Util from './lib/util';
+import './scss/popup.scss';
+
configure({ enforceActions: 'never' });
const Routes = [
diff --git a/extension/popup/index.tsx b/extension/popup/index.tsx
index 0088e6bd6a..f118307193 100644
--- a/extension/popup/index.tsx
+++ b/extension/popup/index.tsx
@@ -1,6 +1,8 @@
import * as React from 'react';
import { observer } from 'mobx-react';
+import { Label, Button, Frame } from 'Component';
import { I } from 'Lib';
+import Url from 'json/url.json';
interface State {
error: string;
@@ -10,15 +12,33 @@ const Index = observer(class Index extends React.Component
+
);
};
+ onLogin () {
+ };
+
+ onDownload () {
+ window.open(Url.download);
+ };
+
});
diff --git a/extension/scss/common.scss b/extension/scss/common.scss
new file mode 100644
index 0000000000..80bccc9f78
--- /dev/null
+++ b/extension/scss/common.scss
@@ -0,0 +1,11 @@
+@import "~scss/font.scss";
+
+body.anytypeWebclipper-iframe,
+body.anytypeWebclipper-popup {
+ font-family: 'Inter'; font-size: 14px; line-height: 20px; letter-spacing: 0.2px;
+}
+
+#anytypeWebclipper-iframe,
+#anytypeWebclipper-popup {
+ * { box-sizing: border-box; border: 0px; margin: 0px; padding: 0px; }
+}
\ No newline at end of file
diff --git a/extension/scss/iframe.scss b/extension/scss/iframe.scss
new file mode 100644
index 0000000000..99f9ba8ad8
--- /dev/null
+++ b/extension/scss/iframe.scss
@@ -0,0 +1,2 @@
+#anytypeWebclipper-iframe {
+}
\ No newline at end of file
diff --git a/extension/scss/popup.scss b/extension/scss/popup.scss
new file mode 100644
index 0000000000..6c7544e15b
--- /dev/null
+++ b/extension/scss/popup.scss
@@ -0,0 +1,12 @@
+body.anytypeWebclipper-popup { width: 268px; font-family: 'Inter'; font-size: 14px; line-height: 20px; letter-spacing: 0.2px; }
+
+#anytypeWebclipper-popup {
+ @import "~scss/form/button.scss";
+ @import "~scss/component/frame.scss";
+
+ .page.pageIndex { height: 232px; }
+ .page.pageIndex {
+ .buttons { display: flex; flex-direction: column; gap: 8px 0px; }
+ .frame { padding: 0px 32px; width: 100%; display: flex; flex-direction: column; gap: 24px 0px; justify-content: center; text-align: center; }
+ }
+}
\ No newline at end of file