chromeEyeDropper/background.html at master · jimly/chromeEyeDropper · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
// vim:ft=javascript

var NEED_DROPPER_VERSION=6;
var NEED_ED_HELPER_VERSION=3;
var BG_VERSION=6;

// jQuery like functions

// for get element by id
function $(id) {
    return document.getElementById(id);
}

// Returns -1 if value isn't in array.
// Return position starting from 0 if found
function inArray(value, array) {
  for(var i=0; i<array.length; i++) {
    if (array[i] == value) return i;
  }
  return -1;
}

// base picker object
var picker = {
  tab: 0,
  version: BG_VERSION,
  dropperLoaded: false,
  dropperVersion: 0,
  screenshotData: '',
  screenshotFormat: 'png',
  canvas: document.createElement("canvas"),
  canvasContext: null,
  debugImage: null,
  debugTab: 0,
  color: null,

  // use selected tab
  // need to null all tab-specific variables
  useTab: function(tab) {
    picker.tab = tab;
    picker.dropperLoaded = false;
    picker.dropperVersion = 0;
    picker.screenshotData = '';
    picker.canvas = document.createElement("canvas");
    picker.canvasContext = null;

    picker.sendMessage({type: 'edropper-loaded'}, function(res) {
      picker.dropperLoaded = true;
      picker.dropperVersion = res.version;
      ////console.log('Picker is loaded with version ' + picker.dropperVersion);
    });
  },

  sendMessage: function(message, callback) {
    chrome.tabs.sendRequest(picker.tab.id, message, callback);
  },

  messageListener: function() {
    ////console.log('message listener called');
    chrome.extension.onConnect.addListener(function(port) {
      port.onMessage.addListener(function(req) {
        switch(req.type) {
          // Taking screenshot for content script
          case 'screenshot':
            ////console.log('received screenshot request');
            picker.capture(); break;

          // Creating debug tab
          case 'debug-tab':
            picker.debugImage = req.image;
            picker.createDebugTab();
            break;

          // Define what background script supports
          case 'supports': picker.supports(req.what); break;

          // Set color given in req
          case 'set-color': picker.setColor(req); break;

          // Get picked color
          case 'get-color': sendResponse({color: picker.color}); break;

          // Reload background script
          case 'reload-background': window.location.reload(); break;

          // Activate picker
          case 'activate2': picker.activate2(); break;

          // Send options to ed helper
          case 'ed-helper-options': picker.edHelperOptions(req); break;

          // Send empty response if unimplemented
          default: sendResponse({});
        }
      });
    });
  },

  // shortcut for injecting new content
  inject: function(file, tab) {
    if ( tab == undefined )
      tab = picker.tab.id;

    console.log("Injecting " + file + " into tab " + tab.id);
    chrome.tabs.executeScript(picker.tab.id, {allFrames: false, file: file}, function() {});
  },

  // load options for ed helper and send them
  edHelperOptions: function(req) {
    var hotkeyActivate = null;

    if ( window.localStorage != null ) {
      if ( window.localStorage.keyActivate != undefined && window.localStorage.keyActivate != "" )
        hotkeyActivate = window.localStorage.keyActivate;
    }

    // we are calling from content script so tab isn't set
    chrome.tabs.getSelected(null, function(tab) {
      picker.tab = tab;

      // inject correct version
      if ( req.version < NEED_ED_HELPER_VERSION )
        picker.inject("js/ed_helper.js");

      // send options back to ed-helper
      picker.sendMessage({type: "ed-helper-options", options: {hotkeyActivate: hotkeyActivate}}, function() {});
    });

  },

  supports: function(what) {
    var state = 'no';
    if ( req.what == 'dummy' || req.what == 'history' )
      state = 'ok';

    sendResponse({state: state});
  },

  // method for setting color. It set picker color, update badge and save to history if possible
  setColor: function(req) {
    picker.color = req.color.rgbhex;
    chrome.browserAction.setBadgeText({text: 'N'});
    chrome.browserAction.setBadgeBackgroundColor({color: [req.color.r, req.color.g, req.color.b, 255]});

    // local storage only if available
    if ( window.localStorage != null ) {
      // save to clipboard through small hack
      if ( window.localStorage['autoClipboard'] === "true" ) {
        var edCb = $('edClipboard');
        edCb.value = window.localStorage['autoClipboardNoGrid'] === "true" ? picker.color : '#' + picker.color;
        edCb.select();
        document.execCommand("copy", false, null);
      }

      // history can be disabled i.e when setting color from
      // history itself
      if ( req.history == undefined || req.history != 'no' ) {
        var history = JSON.parse(window.localStorage.history);
        // first check if there isn't same color in history
        if ( inArray(picker.color, history) < 0 ) {
          history.push(picker.color);
          window.localStorage.history = JSON.stringify(history);
        }
      }
    }
  },

  // activate from content script
  activate2: function() {
    chrome.tabs.getSelected(null, function(tab) {
      picker.useTab(tab);
      picker.activate();
    });
  },

  // activate Pick
  activate: function() {
    // inject javascript if needed
    if ( picker.dropperLoaded === false ) {
      ////console.log('trying to inject jquery');
      chrome.tabs.executeScript(picker.tab.id, {allFrames: false, file: "inc/jquery-1.4.2.min.js"}, function() {
        ////console.log('jquery injected');
        chrome.tabs.executeScript(picker.tab.id, {allFrames: false, file: "inc/jquery-special-scroll.js"}, function() {
          ////console.log('jquery-special-scroll injected');
          chrome.tabs.executeScript(picker.tab.id, {allFrames: false, file: "edropper2.js"}, function() {
            ////console.log('edropper2 injected');

            picker.pickupActivate();

          });
        });
      });

    // dropper is loaded but with old version
    } else if ( picker.dropperVersion == undefined || picker.dropperVersion < NEED_DROPPER_VERSION ) {
      // we need to explicitly load jquery.hotkeys.js for dropper version lower than 5
      if ( picker.dropperVersion <= 4 )
        chrome.tabs.executeScript(picker.tab.id, {allFrames: false, file: "inc/jquery.hotkeys.js"});

      chrome.tabs.executeScript(picker.tab.id, {allFrames: true, file: "edropper2.js"}, function() {
        ////console.log('new version of edropper2 injected');
        picker.pickupActivate();
      });

    // dropper is loaded, activate
    } else
      picker.pickupActivate();
  },

  pickupActivate: function() {
    // load options
    cursor = (window.localStorage.dropperCursor === 'crosshair') ? 'crosshair' : 'default';
    enableColorToolbox = (window.localStorage.enableColorToolbox === "false") ? false : true;
    enableColorTooltip = (window.localStorage.enableColorTooltip === "false") ? false : true;
    enableRightClickDeactivate = (window.localStorage.enableRightClickDeactivate === "false") ? false : true;

    // activate picker
    picker.sendMessage({type: 'pickup-activate', options: { cursor: cursor, enableColorToolbox: enableColorToolbox, enableColorTooltip: enableColorTooltip, enableRightClickDeactivate: enableRightClickDeactivate}}, function() {});

    ////console.log('activating pickup');
  },

  // capture actual Screenshot
  capture: function() {
    ////console.log('capturing');
    try {
      chrome.tabs.captureVisibleTab(null, {format: picker.screenshotFormat, quality: 100}, picker.doCapture);
    // fallback for chrome before 5.0.372.0
    } catch(e) {
      chrome.tabs.captureVisibleTab(null, picker.doCapture);
    }
  },

  doCapture: function(data) {
      ////console.log('sending updated image');
      picker.sendMessage({type: 'update-image', data: data}, function() {});
  },

  createDebugTab: function() {
    // DEBUG
    if ( picker.debugTab != 0 ) {
      chrome.tabs.sendRequest(picker.debugTab, {type: 'update'});
    } else
      chrome.tabs.create({url: 'debugimage.html', selected: false}, function(tab) { picker.debugTab = tab.id });
  },

  isThisPlatform: function(operationSystem) {
    return navigator.userAgent.toLowerCase().indexOf(operationSystem) > -1;
  },

  tabOnChangeListener: function() {
    // deactivate dropper if tab changed
    chrome.tabs.onSelectionChanged.addListener(function(tabId, selectInfo) {
      if ( picker.tab.id == tabId )
        picker.sendMessage({type: 'pickup-deactivate'}, function() {});
    });
  },

  handleOlderVersions: function() {
    // get old version
    version = window.localStorage.bgVersion || 0;

    if ( version == picker.version )
      return;

    // pre 0.2.5
    // global shortcuts added - we have to inject new scripts
    // to every tab
    if ( version < 6 ) {
      chrome.windows.getAll({populate: true}, function(wins) {
        wins.forEach(function(win) {
          win.tabs.forEach(function(tab) {
            if ( tab != undefined && tab.url.indexOf('http') == 0 ) {
              picker.inject("inc/shortcut.js", tab.id);
              picker.inject("js/ed_helper.js", tab.id);
            }
          });
        });
      });
    }

    window.localStorage.bgVersion = picker.version;
  },

  init: function() {
    // only if we have support for localStorage
    if ( window.localStorage != null ) {

      // show installed or updated page
      if ( window.localStorage.seenInstalledPage == undefined || window.localStorage.seenInstalledPage === "false" ) {
        // TODO: for new installs inject ed helper to all tabs
        window.localStorage.seenInstalledPage = true;
        chrome.tabs.create({url: 'pages/installed.html', selected: true});
      }

      picker.handleOlderVersions();
    }

    // settings from local storage
    if ( window.localStorage.history == undefined )
      window.localStorage.history = "[]";
    // windows support jpeg only
    picker.screenshotFormat = picker.isThisPlatform('windows') ? 'jpeg' : 'png';

    // we have to listen for messages
    picker.messageListener();

    // act when tab is changed
    picker.tabOnChangeListener();
  }
};

</script>
</head>
<body onload="picker.init()">
  <textarea id="edClipboard"></textarea>
</body>
</html>