From 6652b4141e07b7f07bdc8c7ab9462a394dab992c Mon Sep 17 00:00:00 2001 From: Jeremy Dormitzer Date: Wed, 17 Jan 2018 11:47:21 -0500 Subject: [PATCH] Make sidebar in content script instead of firefox-specific api --- ext/manifest.json | 23 ++++++++++--------- ext/sidebar.html | 4 ++-- project.clj | 7 ++++-- src/looped_in/background.cljs | 16 ++++++++++++- src/looped_in/content.cljs | 27 ++++++++++++++++++++++ src/looped_in/sidebar.cljs | 43 ++++++++++++++--------------------- 6 files changed, 78 insertions(+), 42 deletions(-) create mode 100644 src/looped_in/content.cljs diff --git a/ext/manifest.json b/ext/manifest.json index 2b5e443..63899fb 100644 --- a/ext/manifest.json +++ b/ext/manifest.json @@ -12,8 +12,7 @@ "background": { "scripts": [ "js/browser-polyfill.min.js", - "js/generated/out/goog/base.js", - "js/generated/out/cljs_deps.js", + "js/generated/out/cljs_base.js", "js/generated/background.js" ] }, @@ -21,15 +20,17 @@ "default_icon": "icons/icon48.png", "default_title": "Looped In" }, - "sidebar_action": { - "default_icon": { - "16": "icons/icon16.png", - "48": "icons/icon48.png" - }, - "default_title": "Looped In", - "default_panel": "sidebar.html" - }, + "content_scripts": [ + { + "matches": [""], + "js": [ + "js/browser-polyfill.min.js", + "js/generated/out/cljs_base.js", + "js/generated/content.js" + ] + } + ], "permissions": ["tabs", "https://hn.algolia.com/*"], "content_security_policy": "script-src 'self' 'unsafe-eval' 'sha256-CfMPE8ys/ylJ5D9qKG0a9/UejrcczMr4/EmFCbVbgcc=' 'sha256-XsBu2nEJnS7x/Izq1v7dzy3Ze5myJMHvg4zukh/R1Yk=' 'sha256-AUCho1UyOpYFSZDg8EM9SYlysRIrUpQKZ7iE9CFSYfU=' 'sha256-vLlTaRFN8A2FPadIx711FwK9Ytd6LXkAzuEYAdC0D1k='; object-src 'self'; connect-src 'self' https://hn.algolia.com", - "web_accessible_resources": ["js/*.map", "js/generated/*.map", "js/generated/out/*"] + "web_accessible_resources": ["sidebar.html", "js/*.map", "js/generated/*.map", "js/generated/out/*"] } diff --git a/ext/sidebar.html b/ext/sidebar.html index 624628b..4c54e14 100644 --- a/ext/sidebar.html +++ b/ext/sidebar.html @@ -3,8 +3,8 @@ - - + + diff --git a/project.clj b/project.clj index 52cfb11..d8ad167 100644 --- a/project.clj +++ b/project.clj @@ -10,16 +10,19 @@ [cljs-ajax "0.7.3"]] :plugins [[lein-cljsbuild "1.1.7"]] :cljsbuild {:builds [{:source-paths ["src"] - :compiler {:optimizations :none + :compiler {:optimizations :simple :pretty-print true :source-map true :output-dir "ext/js/generated/out" :modules {:background {:output-to "ext/js/generated/background.js" :entries #{"looped-in.background"}} + :content + {:output-to "ext/js/generated/content.js" + :entries #{"looped-in.content"}} :sidebar {:output-to "ext/js/generated/sidebar.js" - :entries #{"looped-in.sidebar"}}}}}]}) + :entries #{"looped-in.sidebar"}}}}}]} :profiles {:dev {:dependencies [[com.cemerick/piggieback "0.2.2"] [org.clojure/tools.nrepl "0.2.10"]] :repl-options {:nrepl-middleware [cemerick.piggieback/wrap-cljs-repl]}}}) diff --git a/src/looped_in/background.cljs b/src/looped_in/background.cljs index 526ded1..c0179f3 100644 --- a/src/looped_in/background.cljs +++ b/src/looped_in/background.cljs @@ -58,7 +58,16 @@ (set-badge-text! (str num-comments))))) (defn handle-browser-action [tab] - (-> js/browser (.-sidebarAction) (.open))) + (-> js/browser + (.-tabs) + (.sendMessage (.-id tab) + (clj->js {:type "openSidebar" + :ids @object-ids})))) + +(defn handle-message [msg sender respond] + (case (.-type msg) + "fetchItems" (channel->promise + (go (clj->js ( js/browser (.-tabs) @@ -75,6 +84,11 @@ (.-onClicked) (.addListener handle-browser-action)) +(-> js/browser + (.-runtime) + (.-onMessage) + (.addListener handle-message)) + ;; Application logic: ;; 1. Event comes in (new url) ;; 2. Fetch HN hits diff --git a/src/looped_in/content.cljs b/src/looped_in/content.cljs new file mode 100644 index 0000000..6f9849a --- /dev/null +++ b/src/looped_in/content.cljs @@ -0,0 +1,27 @@ +(ns looped-in.content + (:require [goog.dom :as dom] + [goog.style :as style] + [looped-in.logging :as log])) + +(defn sidebar-dom [] + (let [sidebar-url (-> js/browser (.-extension) (.getURL "sidebar.html"))] + (dom/createDom "iframe" + #js {:src sidebar-url + :style (style/toStyleAttribute + #js {:position "fixed" + :height "100%" + :width "300px" + :top 0 + :left 0})}))) + +(defn open-sidebar [] + (dom/appendChild js/document.body (sidebar-dom))) + +(defn handle-message [msg] + (case (.-type msg) + "openSidebar" (open-sidebar))) + +(-> js/browser + (.-runtime) + (.-onMessage) + (.addListener handle-message)) diff --git a/src/looped_in/sidebar.cljs b/src/looped_in/sidebar.cljs index a0579c0..bee07e2 100644 --- a/src/looped_in/sidebar.cljs +++ b/src/looped_in/sidebar.cljs @@ -7,12 +7,13 @@ [looped-in.logging :as log]) (:import (goog.ui Zippy))) -(defn log [& args] - (let [bg (-> js/browser (.-extension) (.getBackgroundPage))] - (apply (-> bg (.-console) (.-log)) "[Looped In]" (map clj->js args)))) +(enable-console-print!) -(defn comment-dom [{:strs [text author children]}] - (let [$text (dom/createDom "div" +(defn comment-dom [comment] + (let [text (.-text comment) + author (.-author comment) + children (array-seq (.-children comment)) + $text (dom/createDom "div" #js {:class "commentText body20"} (dom/safeHtmlToNode (Sanitizer/sanitize text))) $author (dom/createDom "div" @@ -29,7 +30,6 @@ "div" #js {:class "commentChildren"} (clj->js (map comment-dom children)))] - (log $toggle) (Zippy. $toggle $children) (dom/appendChild $card $toggle) (dom/createDom "div" @@ -50,8 +50,8 @@ (defn story-dom [story] (let [$title (dom/createDom "div" #js {:class "storyTitle title20 card"} - (story "title")) - $comments (comments-dom (filter #(= "comment" (% "type")) (story "children")))] + (.-title story)) + $comments (comments-dom (filter #(= "comment" (.-type %)) (array-seq (.-children story))))] (Zippy. $title $comments) (dom/createDom "div" #js {:class "story"} @@ -60,25 +60,16 @@ (defn render-items [items] (dom/removeChildren (dom/getElement "storiesContainer")) - (let [stories (filter #(= "story" (% "type")) items) + (let [stories (filter #(= "story" (.-type %)) items) $stories (clj->js (map story-dom stories)) $storiesContainer (dom/getElement "storiesContainer")] - (log items) (dom/append $storiesContainer $stories))) -(defn fetch-and-render-items [ids] - (go (-> ids - (hn/fetch-items) - ( js/browser - (.-runtime) - (.-onMessage) - (.addListener handle-message)) +(go (-> js/browser + (.-runtime) + (.sendMessage (clj->js {:type "fetchItems"})) + (promise->channel) + (