Make sidebar in content script instead of firefox-specific api
This commit is contained in:
Jeremy Dormitzer
parent
dc880ec074
commit
6652b4141e
@ -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": ["<all_urls>"],
|
||||
"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/*"]
|
||||
}
|
||||
|
||||
@ -3,8 +3,8 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="css/sidebar.css">
|
||||
<script src="js/generated/out/goog/base.js"></script>
|
||||
<script src="js/generated/out/cljs_deps.js"></script>
|
||||
<script src="js/browser-polyfill.min.js"></script>
|
||||
<script src="js/generated/out/cljs_base.js"></script>
|
||||
<script src="js/generated/sidebar.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@ -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]}}})
|
||||
|
||||
@ -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 (<! (hn/fetch-items @object-ids)))))))
|
||||
|
||||
(-> 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
|
||||
|
||||
27
src/looped_in/content.cljs
Normal file
27
src/looped_in/content.cljs
Normal file
@ -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))
|
||||
@ -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)
|
||||
(<!)
|
||||
((fn [items] (filter #(not (nil? %)) items)))
|
||||
(render-items))))
|
||||
|
||||
(defn handle-message [msg]
|
||||
(case (.-type msg)
|
||||
"objectIds" (fetch-and-render-items (.-ids msg))
|
||||
(log/error (str "Unknown message type " (.-type msg)))))
|
||||
|
||||
(-> js/browser
|
||||
(go (-> js/browser
|
||||
(.-runtime)
|
||||
(.-onMessage)
|
||||
(.addListener handle-message))
|
||||
(.sendMessage (clj->js {:type "fetchItems"}))
|
||||
(promise->channel)
|
||||
(<!)
|
||||
(array-seq)
|
||||
((fn [items] (filter #(not (nil? %)) items)))
|
||||
(render-items)))
|
||||
|
||||
Loading…
Reference in New Issue
Block a user