Как получить уведомление об изменении размера окна в браузере Chrome

Question

Я пишу расширение для браузера Chrome, где я хотел добавить прослушиватель событий для события изменения размера окна. Я выполняю свой метод для события загрузки окна, но не получаю для события изменения размера.

Ниже упоминается код для моего файла manifest.json

{
  "name": "A browser action",
  "version": "1.0",
  "background": { "scripts": ["background.js"] },
  "permissions": [
    "tabs", "http://*/*"
  ],
  "manifest_version": 2
}

Ниже приведен код для моего файла background.js.

var myExtension = 
{  
    init: function()
    {  
      // The event can be DOMContentLoaded, pageshow, pagehide, load or   unload.           
      alert("ASHSIH");
      window.addEventListener("resize", this.onmyPageResize, false);
    },
    onmyPageResize: function(aEvent) 
    {  
      alert("RESIZED");

    }  
}


window.addEventListener("load", function load(event){  
  window.removeEventListener("load", load, false); //remove listener, no longer   needed  
  myExtension.init();    
},false); 

Answer 1

Файл background.js не может записывать события изменения размера в браузере. Для этого вам нужно будет вставить скрипт контента.

Answer 2

Chrome-o-Tile является одним из примеров расширения, которое прослушивает изменение размера в своем скрипте содержимого.

В manifest.json:

"content_scripts": [
  {
    "js": ["contentscript.js"],
    "run_at": "document_start",
    "matches": [
      "<all_urls>"
    ]
  }
],

В contentcript.js:

'use strict';

var timeoutId = 0;

window.addEventListener('resize', function() {
  if (timeoutId) {
    clearTimeout(timeoutId);
  }
  timeoutId = setTimeout(function() {
    chrome.runtime.sendMessage({method: 'resize'});
    timeoutId = 0;
  }, 100);
}, false);

В background.js:

chrome.runtime.onMessage.addListener(function requested(request) {
  if (request.method === 'resize') {
    ...
  }
)};

Существует также открытая проблема для реализации события chrome.windows.onResize для расширений Chrome.

Answer 3

Для будущих читателей этого вопроса chrome.windows API предоставляет onBoundsChanged событие:

onBoundsChanged (начиная с Chrome 86)

Вызывается при изменении размера окна; это событие отправляется только при фиксации новых границ, а не для текущих изменений.

https://developer.chrome.com/extensions/windows

Вот как можно использовать событие: chrome.windows.onBoundsChanged.addListener( callback() )

(Убедитесь, что manifest.json файл объявляет tabs разрешение)

  {
    "name": "My extension",
    ...
    "permissions": ["tabs"],
    ...
  }

Answer 4

Вы можете использовать JQuery's bind() функция.. http://api.jquery.com/bind/

$(window).bind('resize', function () {
//do something here
});