Как изменить фон всех сайтов с помощью плагина Chrome

Для того чтобы введенная по ссылке картинка применялась на все background сайтов, необходимо использовать API браузера chrome.tabs и content scripts.

Создайте новый файл background.js и добавьте в него следующий код:

function changeBackground(url) {
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
        chrome.tabs.executeScript(
            tabs[0].id,
            {code: 'document.body.style.backgroundImage = 'url('' + url + '')';'}
        );
    });
}

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    if (request.action == "changeBackground") {
        changeBackground(request.url);
    }
});

Измените файл manifest.json, добавив background.js в список background скриптов:

{
  "manifest_version": 2,
  "name": "Change Background",
  "version": "1.0",
  "description": "Измените фоновый рисунок любого веб-сайта с помощью пользовательского URL.",

  "icons": {
    "48": "icon.png",
    "96": "icon.png"
  },

  "browser_action": {
    "default_title": "Change Background",
    "default_popup": "popup.html"
  },

  "background": {
    "scripts": ["background.js"]
  },

  "permissions": [
    "activeTab"
  ]
}

Измените файл popup.js, добавив следующий код:

document.getElementById("apply").addEventListener("click", function() {
    var url = document.getElementById("url").value;
    chrome.runtime.sendMessage({action: "changeBackground", url: url});
});

Создайте новый файл content.js и добавьте в него следующий код:

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    if (request.action == "getBackground") {
        var background = window.getComputedStyle(document.body, null).getPropertyValue("background-image");
        sendResponse({background: background});
    }
});

Измените файл popup.js, чтобы он получал текущий background сайта:

chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
    chrome.tabs.sendMessage(tabs[0].id, {action: "getBackground"}, function(response) {
        var background = response.background;
        document.getElementById("url").value = background.replace(/^url\(['"](.+)['"]\)/, '$1');
    });
});

Измените файл manifest.json, чтобы он подключал content.js к каждой странице:

{
  "manifest_version": 2,
  "name": "Change Background",
  "version": "1.0",
  "description": "Измените фоновый рисунок любого веб-сайта с помощью пользовательского URL.",

  "icons": {
    "48": "icon.png",
    "96": "icon.png"
  },

  "browser_action": {
    "default_title": "Change Background",
    "default_popup": "popup.html"
  },

  "background": {
    "scripts": ["background.js"]
  },

  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ],

  "permissions": [
    "activeTab"
  ]
}

Теперь ваш плагин будет работать на любой странице и применять выбранную вами картинку на фон.

Как изменить фон всех сайтов с помощью плагина Chrome