0

ページとタブの間で永続化され、すべての画像リンクを Web ページの特定のクラスに保存する配列を作成する単純な拡張機能を作成しようとしています。拡張ボタンをクリックすると、小さな HTML ページが、配列に格納された各画像のプレビューを生成し、その周りにアンカー タグへのリンクが含まれます。

こんにちは、私はクロム拡張機能が初めてで、各ページが読み込まれるときに、一致するクラスを持つすべての画像をすべてのタブから配列にスローする基本的な画像ストリッパーを作成しようとしています。これが私のコードです。

マニフェスト.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);

永続的な.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 がインデックス付けされたすべての画像のグローバル リストを取得するにはどうすればよいですか?

4

1 に答える 1

2

persist.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);
      }      
    });
}

永続的な.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});
      }
    }
);

インジェクション.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});

これが私のデモ拡張機能です。(crx)

アーカイブ内の拡張ファイル (rar)

それを試すには、

  • このページを開く
  • 拡張アイコンをクリックします

ポップアップに Google ロゴが表示されます。

于 2013-08-01T03:00:56.043 に答える