From e7e163a8ec1a94d6bf987e1531f1abc8785f9e0a Mon Sep 17 00:00:00 2001
From: Taiju Aoki <aokitaiju0513@gmail.com>
Date: Sun, 26 Nov 2023 23:35:54 +0900
Subject: [PATCH] Add Romnibar (#29)

---
 README.md                     |  8 ++-
 css/style.css                 | 15 ++++++
 index.html                    |  8 +--
 manifest.json                 | 91 ++++++++++++++++++++++++-----------
 package.json                  |  9 ++--
 src/const.js                  |  2 +-
 src/main.js                   | 18 ++++++-
 src/romnibar/contentScript.js | 16 ++++++
 src/romnibar/rexioryWorker.js | 30 ++++++++++++
 9 files changed, 158 insertions(+), 39 deletions(-)
 create mode 100644 src/romnibar/contentScript.js
 create mode 100644 src/romnibar/rexioryWorker.js

diff --git a/README.md b/README.md
index 5c1e5c8..06cce9d 100644
--- a/README.md
+++ b/README.md
@@ -5,12 +5,17 @@
 [![CI](https://github.com/blue0513/RexiOry/actions/workflows/ci.yml/badge.svg)](https://github.com/blue0513/RexiOry/actions/workflows/ci.yml)
 
 RexiOry is a Chrome extension that extends the "New Tab Page" and supports fast offline fuzzy searches of History & Bookmarks.
+Additionally, by displaying _Romnibar_ on the current tab, you can quickly access Rexiory.
 
 - *This extension is strongly inspired by [chikamichi](https://github.com/kawamataryo/chikamichi) and pays the utmost respect!*
 - *This extension is a prototype. We do destructive changes from time to time*
 
+### New Tab Page
 ![output](https://user-images.githubusercontent.com/8979468/222137781-7b02f2ad-b052-4995-9e07-24b31f8c47ba.gif)
 
+### Romnibar
+![Romnibar](https://github.com/blue0513/RexiOry/assets/8979468/0028a03a-e457-4042-ad6a-d709353e1fa5)
+
 ## Features
 
 - Simple UI with shortcuts
@@ -20,7 +25,7 @@ RexiOry is a Chrome extension that extends the "New Tab Page" and supports fast
 ## Usage
 
 1. Just follow [official instruction](https://developer.chrome.com/docs/extensions/) and install this extension
-1. Just open "New Tab Page"!
+1. Just open "New Tab Page", or `Alt+R` to show _Romnibar_
 
 ### Shortcuts
 
@@ -31,6 +36,7 @@ RexiOry is a Chrome extension that extends the "New Tab Page" and supports fast
 | `Cmd + c`         | Copy URL                                            |
 | `Cmd + k`         | Delete history, bookmark                            |
 | `Ctrl + n/p/f/b`  | Select candidates                                   |
+| `Alt + r`         | Show Romnibar                                       |
 
 ## Acknowledgments
 
diff --git a/css/style.css b/css/style.css
index 975b81a..68b2cd1 100644
--- a/css/style.css
+++ b/css/style.css
@@ -51,3 +51,18 @@ a:focus {
   font-weight: 400;
   font-size: 1rem;
 }
+
+#iframe-container iframe {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+
+  width: 70%;
+  min-width: 780px;
+  height: 70%;
+  z-index: 9999;
+
+  border: 1px solid black;
+  box-shadow: 0 0 15px rgba(0, 0, 0, 0.7);
+}
diff --git a/index.html b/index.html
index e4dee9e..ccb0a7d 100644
--- a/index.html
+++ b/index.html
@@ -42,8 +42,8 @@
             style="width: 50%; margin-bottom: 15px"
           >
             <input
-              id="search"
-              class="form-control me-2 search"
+              id="rexiory-search"
+              class="form-control me-2 rexiory-search"
               placeholder="Search"
               aria-label="Search"
               autocomplete="off"
@@ -57,7 +57,7 @@
     <div class="d-flex" style="margin-top: 80px; height: calc(100vh -85px)">
       <!-- Sidebar -->
       <div
-        class="d-flex flex-column flex-shrink-0 p-3 text-bg-dark custom-dark-bg"
+        class="d-flex flex-column flex-shrink-0 p-3 text-bg-dark custom-dark-bg rexiory-sidebar"
         style="height: 100%; width: 105px; position: fixed"
       >
         <ul class="nav flex-column mb-auto">
@@ -72,7 +72,7 @@
 
       <!-- Main -->
       <div
-        class="container"
+        class="container custom-dark-bg rexiory-container"
         style="
           max-width: calc(100vw - 105px);
           margin-top: 10px;
diff --git a/manifest.json b/manifest.json
index 23e95bb..8c696bf 100644
--- a/manifest.json
+++ b/manifest.json
@@ -1,32 +1,67 @@
 {
-    "manifest_version": 3,
-    "name": "RexiOry",
-    "description": "",
-    "version": "1.0",
-    "permissions": [
-        "history",
-        "favicon",
-        "bookmarks",
-        "search",
-        "storage"
-    ],
-    "options_ui": {
-        "page": "options.html",
-        "open_in_tab": false
-    },
-    "chrome_url_overrides" : {
-        "newtab": "index.html"
-    },
-    "web_accessible_resources": [
-        {
-        "resources": ["_favicon/*"],
-        "matches": ["<all_urls>"]
+  "manifest_version": 3,
+  "name": "RexiOry",
+  "description": "",
+  "version": "1.0",
+  "background": {
+    "service_worker": "src/romnibar/rexioryWorker.js"
+  },
+  "permissions": [
+    "history",
+    "favicon",
+    "bookmarks",
+    "search",
+    "storage",
+    "tabs",
+    "scripting",
+    "webNavigation"
+  ],
+  "options_ui": {
+    "page": "options.html",
+    "open_in_tab": false
+  },
+  "chrome_url_overrides": {
+    "newtab": "index.html"
+  },
+  "host_permissions": [
+    "http://*/*",
+    "https://*/*"
+  ],
+  "web_accessible_resources": [
+    {
+      "resources": [
+        "_favicon/*",
+        "index.html"
+      ],
+      "matches": [
+        "<all_urls>"
+      ]
     }
-    ],
-    "icons": {
-        "16": "favicon/favicon16.png",
-        "32": "favicon/favicon32.png",
-        "48": "favicon/favicon48.png",
-        "128": "favicon/favicon128.png"
+  ],
+  "content_scripts": [
+    {
+      "matches": [
+        "https://*/*",
+        "https://*/*"
+      ],
+      "js": [
+        "src/romnibar/contentScript.js"
+      ]
     }
+  ],
+  "commands": {
+    "show": {
+      "suggested_key": {
+        "default": "Alt+R",
+        "mac": "Alt+R"
+      },
+      "description": "Show Romnibar"
+    }
+  },
+  "icons": {
+    "16": "favicon/favicon16.png",
+    "32": "favicon/favicon32.png",
+    "48": "favicon/favicon48.png",
+    "128": "favicon/favicon128.png"
+  }
 }
diff --git a/package.json b/package.json
index aa58f52..f50ca99 100644
--- a/package.json
+++ b/package.json
@@ -1,10 +1,11 @@
 {
     "name": "RexiOry",
     "scripts": {
-        "eslint": "npx eslint src/*.js",
-        "eslint-fix": "npx eslint --fix src/*.js",
-        "prettier": "npx prettier --check src/*.js *.html css/*.css",
-        "prettier-fix": "npx prettier --write src/*.js *.html css/*.css",
+        "eslint": "npx eslint 'src/**/*.js'",
+        "eslint-fix": "npx eslint --fix 'src/**/*.js'",
+        "prettier": "npx prettier --check 'src/**/*.js' *.html css/*.css",
+        "prettier-fix": "npx prettier --write 'src/**/*.js' *.html css/*.css",
+        "fix-all": "npm run eslint-fix && npm run prettier-fix",
         "check-all": "npm run eslint && npm run prettier"
     },
     "devDependencies": {
diff --git a/src/const.js b/src/const.js
index 85b2140..9fd4905 100644
--- a/src/const.js
+++ b/src/const.js
@@ -4,7 +4,7 @@ export const SEARCH_DEBOUNCE = 100;
 export const MOVE_DEBOUNCE = 10;
 export const SORT_BY_SCORE = false;
 export const SCORE_THRESHOLD = 0.3;
-export const SEARCH_FORM_CLASS = "search";
+export const SEARCH_FORM_CLASS = "rexiory-search";
 export const HISTORY_LIST_CLASS = "historyItemList";
 export const HISTORY_ITEM_CLASS = "historyItem";
 export const BOOKMARK_LIST_CLASS = "bookmarkItemList";
diff --git a/src/main.js b/src/main.js
index a3ff794..f5cc0b3 100644
--- a/src/main.js
+++ b/src/main.js
@@ -15,6 +15,8 @@ initialize();
 //////////////////
 
 async function initialize() {
+  changeHtml();
+
   // Show history & bookmarks
   document.addEventListener("DOMContentLoaded", async function () {
     await buildHistoryBookmarkList("");
@@ -116,7 +118,7 @@ async function searchInputObserver() {
 }
 
 async function optionEventObserver() {
-  document.querySelector("#options").addEventListener("click", function () {
+  document.querySelector("#options")?.addEventListener("click", function () {
     if (chrome.runtime.openOptionsPage) {
       chrome.runtime.openOptionsPage();
     } else {
@@ -124,3 +126,17 @@ async function optionEventObserver() {
     }
   });
 }
+
+function changeHtml() {
+  const insideIframe = window.self !== window.top;
+  if (!insideIframe) return;
+
+  document.head.insertAdjacentHTML("beforeend", '<base target="_parent">');
+
+  const sidebar = document.querySelector(".rexiory-sidebar");
+  sidebar.remove();
+
+  const container = document.querySelector(".rexiory-container");
+  container.style.marginLeft = "inherit";
+  container.style.maxWidth = "inherit";
+}
diff --git a/src/romnibar/contentScript.js b/src/romnibar/contentScript.js
new file mode 100644
index 0000000..b93abfd
--- /dev/null
+++ b/src/romnibar/contentScript.js
@@ -0,0 +1,16 @@
+chrome.runtime.onMessage.addListener(async (message) => {
+  if (message.command !== "show") return;
+
+  if (document.getElementById("iframe-container")) {
+    document.getElementById("iframe-container")?.remove();
+    return;
+  }
+
+  const iframe = document.createElement("iframe");
+  iframe.src = chrome.runtime.getURL("index.html");
+  const container = document.createElement("div");
+  container.setAttribute("id", "iframe-container");
+
+  container.appendChild(iframe);
+  document.body.appendChild(container);
+});
diff --git a/src/romnibar/rexioryWorker.js b/src/romnibar/rexioryWorker.js
new file mode 100644
index 0000000..abea6d7
--- /dev/null
+++ b/src/romnibar/rexioryWorker.js
@@ -0,0 +1,30 @@
+chrome.webNavigation.onDOMContentLoaded.addListener(async ({ tabId }) => {
+  const injectionCSS = {
+    target: { tabId: tabId },
+    files: ["css/style.css"],
+  };
+  chrome.scripting.insertCSS(injectionCSS);
+});
+
+chrome.commands.onCommand.addListener(async (command) => {
+  switch (command) {
+    case "show": {
+      await sendShowCommand();
+      break;
+    }
+  }
+});
+
+async function sendShowCommand() {
+  const tab = await activeTab();
+  if (!tab) return;
+
+  await chrome.tabs.sendMessage(tab.id, { command: "show", tabId: tab.id });
+}
+
+async function activeTab() {
+  const tabs = await chrome.tabs.query({ active: true, currentWindow: true });
+  if (!!tabs && !!tabs[0]) {
+    return tabs[0];
+  }
+}