Запуск сценария содержимого с панели инструментов

Question

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

Я настраиваю кнопку на панели инструментов, но Javascript по-прежнему работает только при загрузке страницы, а не при нажатии кнопки. Кроме того, в тот момент, когда вы нажимаете кнопку на панели инструментов, несмотря на то, что она ничего не делает, она по-прежнему показывает вспышку всплывающего окна. Все, что я хочу сделать, это запустить код замены текста, когда вы нажимаете кнопку на панели инструментов, без отображения поля popup.html.

в настоящее время код выглядит следующим образом,

manifest.json

{ 
    "name": "Browser Action", 
    "version": "0.0.1", 
    "manifest_version": 2, 
    "description": "Show how options page works", 
    // Needed to retrieve options from content script 
    "background": "background.html", 

    // This is how you load Browser Action. Nearly equal to Page one. 
    "browser_action": { 
     "default_icon": "icon.png", 
     "popup": "popup.html" 
    }, 
    "content_scripts": [ 
    { 
     "matches": ["http://*/*", "https://*/*"], 
     "js" : ["popup.js"] 
    } 
    ] 
} 

popup.js

function htmlreplace(a, b, element) {  
    if (!element) element = document.body;  
    var nodes = element.childNodes; 
    for (var n=0; n<nodes.length; n++) { 
     if (nodes[n].nodeType == Node.TEXT_NODE) { 
      var r = new RegExp(a, 'gi'); 
      nodes[n].textContent = nodes[n].textContent.replace(r, b); 
     } else { 
      htmlreplace(a, b, nodes[n]); 
     } 
    } 
} 

htmlreplace('a', 'IT WORKS!!!'); 

popup.html - Blank

background.html

chrome.browserAction.onClicked.addListener(function(tab) { 
    chrome.tabs.executeScript(null, {file: "popup.js"}); 
}); 

Answer 1

Есть несколько изменений, которые вы необходимо сделать (большинство из них, упомянутых rsanchez - но не все) и еще несколько изменений, которые могут быть сделаны .

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

---

Первых вещи первые - Более подробная информация о нескольких ключевых понятиях, связанная с вашим вопросом/проблемой:

• Manifest File Format
• Permissions
• Background pages, Event pages
• Content scripts
• Browser actions

---

структура каталогов Расширение:

  extension-root-directory/ 
      |_____manifest.json 
      |_____background.js 
      |_____content.js 

manifest.json:

{ 
    "manifest_version": 2, 
    "name": "Test Extension", 
    "version": "0.0", 
    "offline_enabled": true, 

    "background": { 
     "persistent": false, 
     "scripts": ["./bg/background.js"] 
    }, 

    "browser_action": { 
     "default_title": "Test Extension" 
     //"default_icon": { 
     // "19": "img/icon19.png", 
     // "38": "img/icon38.png" 
     //}, 
    }, 

    "permissions": [ 
     "activeTab" 
    ] 
} 

background.js:

chrome.browserAction.onClicked.addListener(function(tab) { 
    chrome.tabs.executeScript(tab.id, { file: "content.js" }); 
}); 

content.js:

function htmlReplace(a, b, element) { 
    if (!element) { 
     element = document.body; 
    } 

    var r = new RegExp(a, "gi"); 
    var nodes = element.childNodes; 
    for (var n = 0; n < nodes.length; n++) { 
     if (nodes[n].nodeType == Node.TEXT_NODE) { 
      nodes[n].textContent = nodes[n].textContent.replace(r, b); 
     } else { 
      htmlReplace(a, b, nodes[n]); 
     } 
    } 
} 
htmlReplace("a", "IT WORKS !!!"); 

Answer 2

Вам просто нужно сделать следующие изменения в манифесте:

• Удалить раздел content_scripts.
• Удалите запись browser_action.popup.
• Добавить раздел: "permissions": ["activeTab"]
• Изменить background раздел следующим образом: "background": { "scripts": ["background.js"] } и переименовать файл background.html в background.js