css - 实验性 chrome 历史扩展

Question

我想制作一个 chrome 扩展，作为浏览器窗口的面纱。用户访问网站的次数越多，他们的历史记录就越多。我看过一些 chrome 扩展程序，但它们似乎都链接到一个图标，每次你访问一个新站点时，弹出窗口都会消失。基于图标的解决方案会很好，但我似乎无法弄清楚如何保持盒子向上以及如何使盒子透明(没有白色背景，只有文本)。我搞乱的示例扩展可以在这里找到...

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

这是我现在缺少的一些代码。我可以在浏览器上抛出一个 div，但是当我尝试结合上面代码的扩展时，事情就出错了……除了基本的 js 和处理之外，我不是很流利，但我没有看到任何错误或矛盾。 ..建议？

内容.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

您的代码有两个问题:

1. 在合并这两段代码时，您确实搞砸了，导致内容脚本无法正常运行。

2. 您正在尝试从内容脚本的上下文访问 history API，但它仅可用于后台页面(或与此相关的任何扩展 View )。一种解决方案是通过 Message Passing 在内容脚本和背景页面之间进行通信.

下面是解决这两个问题的示例扩展的源代码:

ma​​nnifest.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);
});