Improve robustness of image map creation

One flaw I noticed in nearly all competitors was relying on Google's image lazy-load script not to change in any way.

A more robust solution than mine would account for the _setImagesSrc function name to also possibly change & probably try only relying on the data:image structure as the initial clue.

It would make scanning the first script more computationally expensive, but detected variables could then be used to speed up processing of subsequent scripts.

Hopefully, Google never decides to combine all their lazy-loading scripts together. I'm not sure how that could be detected performantly, but I'm sure I could find a way, given enough time.

Author: Judahmeek

lib/extractor/thumbnail_index.rb

@@ -10,12 +10,9 @@ module Extractor
   class ThumbnailIndex
     # Greedy on the data URI body, anchored on the trailing `_setImagesSrc(ii,s,r)`
     # to avoid mis-pairing s/ii from adjacent script blocks.
-    BLOCK_REGEX = /
-      var\s+s\s*=\s*'(?<data>data:image\/[^']+)'\s*;\s*
-      var\s+ii\s*=\s*\[(?<ids>[^\]]*)\]\s*;\s*
-      var\s+r\s*=\s*'[^']*'\s*;\s*
-      _setImagesSrc\(ii,\s*s,\s*r\)
-    /xm.freeze
+      
+      
+    IMAGE_SETTER_REGEX = /_setImagesSrc\((?<id>[a-z]*),\s*(?<source>[a-z]*)/.freeze
 
     ID_REGEX = /'([^']+)'/.freeze
 
@@ -32,16 +29,19 @@ def build
       mapping = {}
       @document.css("script").each do |script|
         body = script.content
-        # Cheap pre-filter avoids regex scanning unrelated scripts.
-        next unless body.include?("_setImagesSrc")
-
-        body.scan(BLOCK_REGEX) do
-          match = Regexp.last_match
-          # Decode JS escapes so the resulting data URI matches browser output.
-          data_uri = unescape_js(match[:data])
-          # One data URI can map to multiple image ids.
-          match[:ids].scan(ID_REGEX) { |(id)| mapping[id] = data_uri }
-        end
+        desired_variables = body.match(IMAGE_SETTER_REGEX) 
+        next if desired_variables.nil?
+
+        source_regex = /var\s+#{desired_variables[:source]}\s*=\s*'(?<data>data:image\/[^']+)'\s*;/.freeze
+        ids_regex = /var\s+#{desired_variables[:id]}\s*=\s*\[(?<ids>[^\]]*)\]\s*;/.freeze
+        
+        source_result = body.match(source_regex)
+        ids_result = body.match(ids_regex)
+
+        # Decode JS escapes so the resulting data URI matches browser output.
+        data_uri = unescape_js(source_result[:data])
+        # One data URI can map to multiple image ids.
+        ids_result[:ids].scan(ID_REGEX) { |(id)| mapping[id] = data_uri }
       end
       mapping
     end

spec/thumbnail_index_spec.rb

@@ -11,6 +11,12 @@ def doc_for(script_body)
     expect(described_class.build(doc_for(body))).to eq("img_1" => "data:image/jpeg;base64,ABC")
   end
 
+  it "can handle different variable names with different script structure" do
+    body = "(function(){var ids=['img_1'];var source='data:image/jpeg;base64,ABC';" \
+           "_setImagesSrc(ids,source);})();"
+    expect(described_class.build(doc_for(body))).to eq("img_1" => "data:image/jpeg;base64,ABC")
+  end
+
   it "maps multiple ids in the same call to the same URI" do
     body = "(function(){var s='data:image/jpeg;base64,XYZ';" \
            "var ii=['a','b','c'];var r='';_setImagesSrc(ii,s,r);})();"