Question

我想制作一个镀铬扩展程序，在浏览器窗口中扮演面纱。用户访问网站的次数越多，面纱的历史就越多。我看过一些镀铬扩展程序，但它们似乎都与一个图标相关联，每次访问新网站时，弹出窗口都会消失。基于图标的解决方案会很好，但我似乎无法弄清楚如何保持盒子以及如何使盒子透明（没有白色背景，只是文本）。我在弄乱的示例扩展可以在这里找到...

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

这是我现在缺少的一些代码。我可以在浏览器上抛出一个div，但是当我尝试将上面代码中的扩展组合起来时，事情就会出错...我不是非常流利，超出基本的js和处理，但我没有看到任何错误或矛盾。 ..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

以下是回答您问题的帖子： Chrome popup window always on top

思考的食物：您可以使用内容脚本以编程方式在网站内容上注入透明div，并将历史信息放在那里。这比上面的答案还要多，但是嘿，这可能很有趣：）

编辑：

所以我是'永远在线'的解决方案，我认为这不是你想要的。除非您的浏览器以--enable-panels标志启动，否则它会创建一个弹出窗口。

看起来想要获得您正在寻找的内容，您必须使用我上面提到的内容脚本方法。

Answer 2

您的代码存在两个问题：

在合并两段代码时，你真的搞砸了，导致一个非功能性的内容脚本。
您正尝试从内容脚本的上下文中访问history API，但它仅适用于后台页面（或任何扩展视图）。一种解决方案是通过 Message Passing 在内容脚本和背景页面之间进行通信。

以下是处理这两个问题的示例扩展的源代码：

<强> 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);
});

实验性铬历史扩展

2 个答案: