experimental chrome history extension

Question

I wanted to make a chrome extension that acted as a veil over the browser window. The more the user visited a websites the more filled a the veil would be with their history. I have looked at some chrome extensions, but they all seem linked to an icon and every time you visit a new site the pop up disappears. A icon based solution would be fine, but I can't seem to figure out how to keep the box up and how to make the box transparent(no white background, just text). The sample extension I was messing with can be found here...

http://developer.chrome.com/extensions/examples/api/history/showHistory.zip

here is some of the code I am missing with now. I am able to throw a div over the browser, but when I try to combine the extension from above's code things go awry...I am not extremely fluent beyond basic js and processing, but I don't see anything wrong or contradictory...Advice?

content.js

   function createHistoryDiv() {
    var divHeight = 97;
    var divMargin = 10;

    var div = document.createElement("div");
        div.id = "history";
    var st = div.style;
    st.display = "block";
    st.zIndex = "10000000";
    st.top = "0px";
    st.left = "0px";
    st.right = "0px";
    st.height = divHeight + "%";
    st.background = "rgba(255, 255, 255, .01)";
    st.margin = divMargin + "px";
    st.padding = "5px";
    st.border = "5px solid black";
    st.color = "black";
        st.fontFamily = "Arial,sans-serif";     
        st.fontSize = "36";
    st.position = "fixed";
    st.overflow = "hidden";
    st.boxSizing = "border-box";
        st.pointerEvents = "none";

    document.documentElement.appendChild(div);
    var heightInPixels = parseInt(window.getComputedStyle(div).height);
    st.height = heightInPixels + 'px';
    //document.body.style.webkitTransform = "translateY("
            //+ (heightInPixels + (2 * divMargin))+ "px)";

    return div;
}

function buildDivContent(historyDiv, data) {
    var ul = document.createElement('ul');
    historyDiv.appendChild(ul);

    for (var i = 0, ie = data.length; i < ie; ++i) {
        var a = document.createElement('a');
        a.href = data[i];
        a.appendChild(document.createTextNode(data[i]));

        var li = document.createElement('li');
                li.style.color = "black";
                li.style.display = "inline";
                li.style.wordBreak = "break all";
        li.appendChild(a);
                a.style.color = "black";
                a.style.fontSize = "24px";
                a.style.linkDecoration = "none";
        ul.appendChild(li);
    }
}

chrome.runtime.sendMessage({ action: "buildTypedUrlList" }, function(data) {
    var historyDiv = createHistoryDiv();
    buildDivContent(historyDiv, data);
});

function logoDiv(){
var div2 = document.createElement("div");
div2.id = "logo";
        var st = div2.style;
    st.display = "block";
    st.zIndex = "10000001";
    st.bottom = "0px";
    //st.left = "0px";
    st.right = "0px";
    st.height = "42px";
        st.width = "210px";
    st.background = "rgba(255, 255, 255,1)";
    st.padding = "5px";
        st.margin = "10px";
    st.border = "5px solid black";
    st.color = "black";
        st.fontFamily = "Arial,sans-serif";     
    st.position = "fixed";
    st.overflow = "hidden";
    st.boxSizing = "border-box";
        //st.pointerEvents = "none";

            document.documentElement.appendChild(div2);
                div2.innerHTML = div2.innerHTML + "<a href=\"#\" onclick=\"toggle_visibility(\"logo\");\" style = \"display:block;font-size:24px;margin:0;padding:0;color: black;\">TRANSPARENCY</a>";
                                             return div2;
    function toggle_visibility(id) {
       var e = document.getElementById("logo");
       if(e.style.display == "block")
          e.style.display = "hidden";
       else
          e.style.display = "block";
    }

}

chrome.runtime.sendMessage({ action: "buildTypedUrlList" }, function(data){

    var titleDiv = logoDiv();
    buildDivContent(titleDiv);
});

Answer 1

There are two problems with your code:

1. You have really messed things up while merging the two pieces of code, resulting in a non-functional content-script.

2. You are trying to access the history API from the context of a content-script, but it is only available to the background-page (or any extension view for that matter). One solution is to communicate between the content-script and the background-page through Message Passing.

Below is the source code of a sample extension that takes care of both problems:

mannifest.json:

{
    "manifest_version": 2,

    "name":    "Test Extension",
    "version": "0.0",
    "offline_enabled": false,

    "background": {
        "persistent": false,
        "scripts": ["background.js"]
    },

    "content_scripts": [{
        "matches":    ["*://*/*"],
        "js":         ["content.js"],
        "run_at":     "document_idle",
        "all_frames": false
    }],

    "permissions": [
        "history"
    ]
}

background.js:

// Search history to find up to ten links that a user has typed in,
// and show those links in a popup.
function buildTypedUrlList(callback) {
  // To look for history items visited in the last week,
  // subtract a week of microseconds from the current time.
  var millisecondsPerWeek = 1000 * 60 * 60 * 24 * 7;
  var oneWeekAgo = new Date().getTime() - millisecondsPerWeek;

  // Track the number of callbacks from chrome.history.getVisits()
  // that we expect to get.  When it reaches zero, we have all results.
  var numRequestsOutstanding = 0;

  chrome.history.search({
      'text': '',              // Return every history item....
      'startTime': oneWeekAgo  // that was accessed less than one week ago.
    },
    function(historyItems) {
      // For each history item, get details on all visits.
      for (var i = 0; i < historyItems.length; ++i) {
        var url = historyItems[i].url;
        var processVisitsWithUrl = function(url) {
          // We need the url of the visited item to process the visit.
          // Use a closure to bind the  url into the callback's args.
          return function(visitItems) {
            processVisits(url, visitItems);
          };
        };
        numRequestsOutstanding++;
        chrome.history.getVisits({url: url}, processVisitsWithUrl(url));
      }
      if (!numRequestsOutstanding) {
        onAllVisitsProcessed();
      }
    });


  // Maps URLs to a count of the number of times the user typed that URL into
  // the omnibox.
  var urlToCount = {};

  // Callback for chrome.history.getVisits().  Counts the number of
  // times a user visited a URL by typing the address.
  var processVisits = function(url, visitItems) {
    for (var i = 0, ie = visitItems.length; i < ie; ++i) {
      // Ignore items unless the user typed the URL.
      if (visitItems[i].transition != 'typed') {   // <-- modify to allow different
                                                   //     types of transitions
        continue;
      }

      if (!urlToCount[url]) {
        urlToCount[url] = 0;
      }

      urlToCount[url]++;
    }

    // If this is the final outstanding call to processVisits(),
    // then we have the final results.  Use them to build the list
    // of URLs to show in the popup.
    if (!--numRequestsOutstanding) {
      onAllVisitsProcessed();
    }
  };

  // This function is called when we have the final list of URls to display.
  var onAllVisitsProcessed = function() {
    // Get the top scorring urls.
    urlArray = [];
    for (var url in urlToCount) {
      urlArray.push(url);
    }

    // Sort the URLs by the number of times the user typed them.
    urlArray.sort(function(a, b) {
      return urlToCount[b] - urlToCount[a];
    });

    callback(urlArray.slice(0, 10));
  };
}

chrome.runtime.onMessage.addListener(function(msg, sender, callback) {
    if (msg.action === 'buildTypedUrlList') {
        buildTypedUrlList(callback);
        return true;
    }
    return false;
});

content.js:

function createHistoryDiv() {
    var divHeight = 25;
    var divMargin = 10;

    var div = document.createElement("div");

    var st = div.style;
    st.display = "block";
    st.zIndex = "10";
    st.top = "0px";
    st.left = "0px";
    st.right = "0px";
    st.height = divHeight + "%";
    st.background = "rgba(255, 255, 255, .5)";
    st.margin = divMargin + "px";
    st.padding = "5px";
    st.border = "5px solid black";
    st.color = "black";
    st.fontFamily = "Arial, sans-serif";
    st.fontStyle = "bold";
    st.position = "fixed";
    st.overflow = 'auto';
    st.boxSizing = "border-box";

    document.documentElement.appendChild(div);
    var heightInPixels = parseInt(window.getComputedStyle(div).height);
    st.height = heightInPixels + 'px';
    document.body.style.webkitTransform = "translateY("
            + (heightInPixels + (2 * divMargin))+ "px)";

    return div;
}

function buildDivContent(historyDiv, data) {
    var ul = document.createElement('ul');
    historyDiv.appendChild(ul);

    for (var i = 0, ie = data.length; i < ie; ++i) {
        var a = document.createElement('a');
        a.href = data[i];
        a.appendChild(document.createTextNode(data[i]));

        var li = document.createElement('li');
        li.appendChild(a);

        ul.appendChild(li);
    }
}

chrome.runtime.sendMessage({ action: "buildTypedUrlList" }, function(data) {
    var historyDiv = createHistoryDiv();
    buildDivContent(historyDiv, data);
});

Answer 2

Here is a post that answers your question: Chrome popup window always on top

Food for thought: You could use a content script to programmatically inject a transparent div over site content and put your history information in there. It's more work than the above answer but hey, it might be fun :)

Edit:

So I the 'always on top' solution and I don't think it's quite what you're looking for. It creates a popup unless your browser is started with a --enable-panels flag.

It looks like to get exactly what you're looking for you will have to use the content script method I mentioned above.