Question

我正在尝试创建一个简单的扩展，创建一个在页面和选项卡之间保持不变的数组，并将每个图像链接与网页中的特定类存储在一起。当我点击扩展按钮时，一个小的html页面会生成存储在数组中的每个图像的预览，并带有指向它周围的锚标记的链接。

您好，我是Chrome扩展的新手，我正在尝试制作一个基本的图像剥离器，在每个页面加载时，将所有带有匹配类的图像抛出到所有标签的数组中。这是我的代码。

的manifest.json

{
    "name": "Link Viewer",
    "version": "1",
    "manifest_version" : 2,
    "browser_action" : 
    {
        "default_popup" : "history.html",
        "default_icon" : "icon.png"
    },
    "background" : {"scripts" : ["persistent.js"]},
    "content_scripts" :
    [
        {
            "matches" : ["http://*/*"],
            "js" : ["injection.js"]
        }
    ]
}

history.html

<h1>Image Viewer</h1>
<div id="list">
    <!-- Show Listed Images Here -->
</div>

injection.js

    // Executes every page load
    var elements = document.getElementsByClassName("img");
    var imageLinks = [];
    for(var i = 0; i < elements.length; i++)
    {
        imageLinks.push(elements[i].firstChild.src);
    }
    chrome.extension.sendRequest(imageLinks);

persistent.js

// This script gets run once when the browser is started

// Declare Persistent Image Array

var gifArray = [];

// Create an event listener for when requests are returned from the injection script
chrome.extension.onRequest.addListener
(
    function(linksReturned)
    {
        // Loop through each returned link
        for(var i = 0; i < linksReturned.length; i++)
        {
            var exists = false;
            // loop through each link in the array and make sure it doesn't exist
            for(var x = 0; x < gifArray.length; x++)
            {
                if(gifArray[x] == linksReturned[i])
                {
                    gifArray.splice(x,1); // Remove that index from the array
                    exists = true;
                    break;
                }
            }
            if(exists == false)
            {
                gifArray.push(linksReturned[i]);
            }
        }
        // Links are stored and ready to be displayed on web page
    }
);

// Popup HTML page when someone clicks on HTML button
window.onload = function()
{
    var div = document.getElementById("list");
    // Loop through each GIF and add to the list
    for(var i = 0; i < gifArray.length; i++)
    {
        // Create the anchor element
        var a = document.createElement("a");
        // Create the image element
        var img = document.createElement("img");
        img.setAttribute("src",gifArray[i]);
        // Put the image inside of the anchor
        a.appendChild(img);
        // Put the anchor inside the div
        div.appendChild(a);
    }
}

我做错了什么？如何获得img索引类的每个图像的全局列表？

Answer 1

persistent.js中的代码window.onload = { .... }不适用于您的弹出窗口。

您必须将其persistent.js和popup.js分开，popup.js必须作为脚本包含在history.html中。

像这样，

history.html

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="popup.js"></script>

</head>
<body>
  <h1>Image Viewer</h1>
  <div id="list">
      <!-- Show Listed Images Here -->
  </div>
</body>
</html>

popup.js

// Popup HTML page when someone clicks on HTML button
window.onload = function()
{  
    chrome.extension.sendRequest({type: "getImageLinks"}, function(response) {
      var div = document.getElementById("list");
      // Loop through each GIF and add to the list
      for(var i = 0; i < response.gifArray.length; i++)
      {
          // Create the anchor element
          var a = document.createElement("a");
          // Create the image element
          var img = document.createElement("img");
          img.setAttribute("src", response.gifArray[i]);
          // Put the image inside of the anchor
          a.appendChild(img);
          // Put the anchor inside the div
          div.appendChild(a);
      }      
    });
}

persistent.js

// This script gets run once when the browser is started

// Declare Persistent Image Array

var gifArray = [];

// Create an event listener for when requests are returned from the injection script
chrome.extension.onRequest.addListener
(
    function(request, sender, sendResponse) {
      if (request.type == 'storeImageLinks')
      {
          var linksReturned = request.imageLinks;
          for(var i = 0; i < linksReturned.length; i++)
          {
              var exists = false;
              // loop through each link in the array and make sure it doesn't exist
              for(var x = 0; x < gifArray.length; x++)
              {
                  if(gifArray[x] == linksReturned[i])
                  {
                      exists = true;
                      break;
                  }
              }
              if(exists == false)
              {
                  gifArray.push(linksReturned[i]);
              }
          }
          // Links are stored and ready to be displayed on web page     
      }
      else if (request.type == 'getImageLinks')
      {
          sendResponse({gifArray: gifArray});
      }
    }
);

injection.js

// Executes every page load
    var elements = document.getElementsByClassName("img");
    var imageLinks = [];
    for(var i = 0; i < elements.length; i++)
    {
        imageLinks.push(elements[i].firstChild.src);
    }
    chrome.extension.sendRequest({type: "storeImageLinks", imageLinks : imageLinks});

Here is my demo extension. (crx)

Extension files in archive (rar)

试一试，

打开this页面
点击exntension图标

您会在弹出窗口中看到Google徽标。

尝试创建一个简单的链接缓存扩展但失败

1 个答案:

history.html

popup.js

persistent.js

injection.js