Chrome Extension Access Xively

Question

How can I access a Xively Feed through chrome extension. I am building a simple extension which will block websites depending on the value that is currently displayed on my Xively Feed. However I unsure on how to access the Xively feed without Html, I've looked at the XivelyJS library which I have used before but in a HTML page. However my extension needs to be independent of HTML.

Code Below is my attempt at using XivelyJS however I would be appreciative of an easier or better method.

Background.js:

     chrome.webRequest.onBeforeRequest.addListener(
        function(details) { 
        return {cancel: true};


         },
        {urls: ["*://www.facebook.com/*", "*://www.twitter.com/*"]},
        ["blocking"]);



        // Set your API key first  

// Get feed content  
 xively.setKey( "APIKEY" );

function ReadData(){

    var reading = xively.datastream.get ("832936337", "Reading", callback (data));
    console.log(reading);
    console.log(data);
    setTimeout(ReadData,3000);
    }
    ReadData();

Manifest.json:

{
  "manifest_version": 2,
  "name": "SiteBlockerFyp",
  "description": "Block Respective Sites",
  "version": "1",

"permissions": [
    "webRequest",
    "webRequestBlocking",
    "*://www.facebook.com/*","*://www.twitter.com/*"

  ],
"content_scripts": [
    {
      "matches": ["*://www.facebook.com/*"],

      "js": ["jquery.min.js", "xivelyjs.min.js"]
    }
  ],

  "background": {"scripts": ["background.js"]}


}

Answer 1

Found that I could access the values like so :

     chrome.webRequest.onBeforeRequest.addListener(
        function(details) { 
        return {cancel: true};
                    console.log(details.url);
         },
        {urls: ["*://www.twitter.com/*"]},
        ["blocking"]);








        // Set your API key first  

// Get feed content  
 xively.setKey( "APIKEY" );
 console.log("XIVELY LOADED");

   var feedID        = 832936337,          // Feed ID  
      datastreamID  = "Reading";       // Datastream ID  
      data = "null";  // Your element on the page
      dataUpdated= "null";  


     console.log("READ ");


    xively.datastream.get (feedID, datastreamID, function ( datastream ) {  

    data = datastream["current_value"];
    console.log(data); 

    xively.datastream.subscribe( feedID, datastreamID, function ( event , datastream_updated ) {  

    dataUpdated = datastream_updated["current_value"] ;  
    console.log(dataUpdated);
    });  

  });  

        chrome.tabs.query({'active': true, 'windowId': chrome.windows.WINDOW_ID_CURRENT},
   function(tabs){
      console.log(tabs[0].url);
      if (tabs[0].url == "*www.twitter.com*") {
          alert("Twitter");
      }

   }
);

subscribing also gave me updates as they occurred. However using background.js as a background script in the manifest means it wont run across all pages so I still trying to figure this one out, Content-scripts is apparently the way to go.

{
  "manifest_version": 2,
  "name": "SiteBlockerFyp",
  "description": "Block Respective Sites",
  "version": "1",

"permissions": [
    "webRequest",
    "webRequestBlocking",
    "*://www.twitter.com/*",
"tabs"

  ],



"content_scripts": [
    {
      "matches": ["<all_urls>"],

      "js": ["jquery.min.js", "xivelyjs.min.js", "background.js"]
    }
  ]


}