Updates

gulpfile.js

@@ -45,6 +45,11 @@ gulp.task('manifest', function() {
   .pipe(gulp.dest('dist'));
 });
 
+gulp.task('contentJS', function() {
+  gulp.src(['src/content.js'])
+  .pipe(gulp.dest('dist'));
+})
+
 gulp.task('clean', function() {
   gulp.src('dist')
     .pipe(clean());
@@ -55,4 +60,4 @@ gulp.task('watch', function() {
   gulp.watch(['src/**/*.js'], ['js']);
 });
 
-gulp.task('default', ['js', 'html', 'images', 'manifest', 'connect', 'watch']);
+gulp.task('default', ['js', 'html', 'images', 'manifest', 'contentJS', 'connect', 'watch']);

package.json

@@ -34,6 +34,7 @@
   },
   "dependencies": {
     "angular": "^1.4.4",
-    "angular-ui-router": "^0.2.15"
+    "angular-ui-router": "^0.2.15",
+    "lockr": "^0.8.2"
   }
 }

src/app/components/main.js

@@ -9,10 +9,13 @@ const MainComponent = () => {
     bindToController: true,
     scope: {},
     template: `
+      <p ng-click="main.chromeTab()">chrome tab</p>
       <h1>{{ main.title }}</h1>
       <input type="text" ng-keyup="main.handleInputKeyup($event)" autofocus />
       <ul>
-        <li ng-repeat="item in main.list">{{ item.label }}</li>
+        <li ng-repeat="item in main.list">{{ item.label }} -
+          <span ng-click="main.handleRemove(item.id)">x</span>
+        </li>
       </ul>
       <a ui-sref="settings">settings</a>
     `
@@ -30,6 +33,19 @@ class MainController {
         event.target.value = '';
       }
     }
+    this.handleRemove = id => {
+      WebmarklyService.remove(id);
+      this.list = WebmarklyService.list;
+    }
+
+    this.chromeTab = function() {
+      function showDOM(content) {
+        alert(content);
+      }
+      window.chrome.browserAction.onClicked.addListener(function(tab) {
+        chrome.tabs.sendMessage(tab.id, 'CALLED', showDOM)
+      })
+    }
   }
 }
 MainController.$inject = ['$scope', 'WebmarklyService'];

src/app/services/webmarkly.js

@@ -1,34 +1,49 @@
 import angular from 'angular';
-
-const STORAGE_LOCALSTORAGE = window.localStorage || null;
-const STORAGE_EXTENSION = chrome.storage.sync || null;
-
-const appStorage = STORAGE_LOCALSTORAGE;
+import * as store from 'lockr';
 
 class WebmarklyService {
   constructor() {
-    this.list = [];
+    this.__domain = window.location.href;
+    this.__initialize();
+  }
+
+  __initialize() {
+    if (!!store.get('items_' + this.__domain)) {
+      this.__updateList();
+    } else {
+      store.set('items_' + this.__domain, []);
+    }
+  }
+
+  __updateList() {
+    this.list = store.get('items_' + this.__domain);
   }
 
   getAll() {
-    return this.list;
+    this.__updateList();
   }
 
   getAllByDomain(domain) {
     return this.list.filter(item => item.domain == domain);
   }
 
   add(text) {
-    this.list.unshift({
+    let itemsArr = store.get('items_' + this.__domain);
+    itemsArr.unshift({
       id: Date.now().toString(36),
       label: text,
       position: window.scrollY,
       domain: window.location.href
     });
+    store.set('items_' + this.__domain, itemsArr);
+    this.__updateList();
   }
 
   remove(id) {
-    this.list = this.list.filter(item => item.id != id);
+    let itemsArr = store.get('items_' + this.__domain);
+    itemsArr = itemsArr.filter(item => item.id != id);
+    store.set('items_' + this.__domain, itemsArr);
+    this.__updateList();
   }
 
 }

src/content.js

@@ -0,0 +1,4 @@
+chrome.runtime.onMessage.addListener(function(msg, sender, sendResponse) {
+    console.log(msg);
+    sendResponse(document.all[0].outerHTML);
+});

src/manifest.json

@@ -10,6 +10,16 @@
     "default_popup": "index.html"
   },
 
+  "background": {
+    "persistent": false,
+    "scripts": ["js/bundle.js"]
+  },
+
+  "content_scripts": [{
+    "matches": ["*://*/*"],
+    "js": ["content.js"]
+  }],
+
   "permissions": [
     "activeTab",
     "storage"