5 ms·

Author here, happy to answer any questions about the approach or code!

Keithamus 15y ago
I think Backbone JS might be useful for facilitating communication between the different components that Chrome uses (ie. contentscript <-> browser button). I can't see anything in the Gists you provided that highlight this. Did you do any work on this at all, where you could shed any light?
- mikeknoop 15y ago
  I can explain a little more clearly on how Chrome generates the popup which is shown in the screenshot (you may know this already). When you define a browser_action inside your manifest.json file: "browser_action": { "default_icon": "icon_16.png", "popup": "popup.html" }, Chrome automatically places an icon in the top bar, and when clicked, loads popup.html into a generated bubble. Now, our foray into Chrome Extensions pretty much ends there. We load all our Backbone code via popup.html and let it do its thing. We did not look at any other of the mechanisms Chrome provides to extensions such as contentscripts. With that said, I also see a lot of value in leveraging Backbone's Model and Bindings within contentscripts and it would be something worth exploring -- but it wasn't directly applicable to understanding how Backbone could work for us in overhauling our frontend.
  - troyk 15y ago
    I was just reading through the docs and am getting ready to write my first extension and think I'm going to try and get backbone running in the content script where I believe it's state will be persisted through open/close of the popup. Thanks for your post!
    - jaredsohn 15y ago
      It sounds like you want to use backbone in the background then. It could also be used in the contentscript, but that would be specific to a particular tab and you'd have to send a message from the background (preferred) or popup to request that data to make it accessible to the popup.
    - mikeknoop 15y ago
      To be clear, a contentscript is a script which runs only on a specific website or domain (for example, if I specified my contentscript to run on zapier.com, it would get loaded every time I access that page). Popups, on the other hand, get their scripts loaded into a brand new document when the icon is clicked and rendered into the popup bubble. Backbone makes model/collection caching very easy so my preferred method would be to override Backbone.sync to store data inside LocalStorage. There are a few blog posts out there with tricks on how to persist state between popup loads (unloading the popup DOM into the background page...). I think these strategies would break a Backbone app due to how view bindings work. I'd be curious to know any other ideas on how to persist the actual state (and not just model/collection data) between popup loads. EDIT: To answer my own question a little bit, you could probably get fancy with http://code.google.com/chrome/extensions/background_pages.html http://code.google.com/chrome/extensions/background_pages.ht... but I'd need to do more research on the relation between background pages and popups.
      - troyk 15y ago
        If you find a way to persist the popup please share, I spent the last 9 hours in all out battle. Basically chrome shit cans the window object on blur, the closest I came was pushing the popup body into the background page for resurrection later, but it's clunky around the edges as your dealing with a new window/document context so stuff like js context, scroll position, etc. I've tabled it for now. I'm 99% sure the way to go is to put a popout link on the popup, setPopup to null and then bind the click listener for the popup icon to focus the popup. If the user closes the popped out popup reset setPopup and the process starts anew. I'll still be overring backbone sync and keeping all the data in the background.
amirnathoo 15y ago
Nice, can you say a bit more about the purpose of the app. And did you consider creating it for mobile or other browser platforms. Loaded question - I'm a co-founder of Trigger.io :-D
- mikeknoop 15y ago
  As it exists now, the extension shows what Zaps (web app to web app syncs) you have set up and lets you pause or run them manually. There is a ton more we could build into the extension. Practically our entire site could be run through an extension if you came up with a design which made sense. This is the beauty of an exposed backend API system -- it doesn't care how you represent the data coming out of it and Backbone.js is great lightweight framework for rendering all that data. Eventually, I think we will have "frontend" views across many devices and machines (alluded to in the article, it's just to easy to create another view). We haven't tested the performance on any mobile clients yet but I would definitely look into a solution like Trigger.io when we get to it.

I think Backbone JS might be useful for facilitating communication between the different components that Chrome uses (ie. contentscript <-> browser button). I can't see anything in the Gists you provided that highlight this. Did you do any work on this at all, where you could shed any light?

mikeknoop 15y ago
I can explain a little more clearly on how Chrome generates the popup which is shown in the screenshot (you may know this already). When you define a browser_action inside your manifest.json file: "browser_action": { "default_icon": "icon_16.png", "popup": "popup.html" }, Chrome automatically places an icon in the top bar, and when clicked, loads popup.html into a generated bubble. Now, our foray into Chrome Extensions pretty much ends there. We load all our Backbone code via popup.html and let it do its thing. We did not look at any other of the mechanisms Chrome provides to extensions such as contentscripts. With that said, I also see a lot of value in leveraging Backbone's Model and Bindings within contentscripts and it would be something worth exploring -- but it wasn't directly applicable to understanding how Backbone could work for us in overhauling our frontend.
- troyk 15y ago
  I was just reading through the docs and am getting ready to write my first extension and think I'm going to try and get backbone running in the content script where I believe it's state will be persisted through open/close of the popup. Thanks for your post!
  - jaredsohn 15y ago
    It sounds like you want to use backbone in the background then. It could also be used in the contentscript, but that would be specific to a particular tab and you'd have to send a message from the background (preferred) or popup to request that data to make it accessible to the popup.
  - mikeknoop 15y ago
    To be clear, a contentscript is a script which runs only on a specific website or domain (for example, if I specified my contentscript to run on zapier.com, it would get loaded every time I access that page). Popups, on the other hand, get their scripts loaded into a brand new document when the icon is clicked and rendered into the popup bubble. Backbone makes model/collection caching very easy so my preferred method would be to override Backbone.sync to store data inside LocalStorage. There are a few blog posts out there with tricks on how to persist state between popup loads (unloading the popup DOM into the background page...). I think these strategies would break a Backbone app due to how view bindings work. I'd be curious to know any other ideas on how to persist the actual state (and not just model/collection data) between popup loads. EDIT: To answer my own question a little bit, you could probably get fancy with http://code.google.com/chrome/extensions/background_pages.html http://code.google.com/chrome/extensions/background_pages.ht... but I'd need to do more research on the relation between background pages and popups.
    - troyk 15y ago
      If you find a way to persist the popup please share, I spent the last 9 hours in all out battle. Basically chrome shit cans the window object on blur, the closest I came was pushing the popup body into the background page for resurrection later, but it's clunky around the edges as your dealing with a new window/document context so stuff like js context, scroll position, etc. I've tabled it for now. I'm 99% sure the way to go is to put a popout link on the popup, setPopup to null and then bind the click listener for the popup icon to focus the popup. If the user closes the popped out popup reset setPopup and the process starts anew. I'll still be overring backbone sync and keeping all the data in the background.

amirnathoo 15y ago

Nice, can you say a bit more about the purpose of the app. And did you consider creating it for mobile or other browser platforms. Loaded question - I'm a co-founder of Trigger.io :-D

mikeknoop 15y ago
As it exists now, the extension shows what Zaps (web app to web app syncs) you have set up and lets you pause or run them manually. There is a ton more we could build into the extension. Practically our entire site could be run through an extension if you came up with a design which made sense. This is the beauty of an exposed backend API system -- it doesn't care how you represent the data coming out of it and Backbone.js is great lightweight framework for rendering all that data. Eventually, I think we will have "frontend" views across many devices and machines (alluded to in the article, it's just to easy to create another view). We haven't tested the performance on any mobile clients yet but I would definitely look into a solution like Trigger.io when we get to it.