Chrome Extension - Append HTML & Run JQuery функция на Extension Нажмите

Question

Так что я нахожусь в разгар создания моего первого расширение Chrome (Пытаться)

Я чувствую, что я близко ... Но я действительно не» я знаю, что делать в Google, чтобы получить ответы, которые мне нужны. Поэтому я сожалею, если это глупый вопрос.

По существу, что я пытаюсь сделать, это щелкнуть расширение - добавить HTML & CSS для тела и запустить функцию jQuery. Но, по внешнему виду, мне нужно вызвать jQuery в манифесте? Который я думаю, что я сделал, и он все еще не работает.

Мой код:

manifest.json

{ 
    "name": "Title", 
    "description": "Description", 
    "version": "1.0", 
    "browser_action": { 
     "default_title": "Hover Title", 
     "default_icon": "icon.png" 
    }, 
"content_scripts": [ { 
    "js": [ "jquery-1.7.2.min.js", "background.js" ], 
    "matches": [ "http://*/*", "https://*/*"] 
    }], 
    "manifest_version": 2 
} 

background.js

chrome.browserAction.onClicked.addListener(function(tab) { 

    (function ($) { 
     $('body').append("Hello"); 
     alert("Hello"); 
     console.log("Hello"); 
    }(jQuery)); 

}); 

Любое понимание, куда я иду неправильно будет массово полезно!

спасибо !!

Answer 1

Хром extension architecture is simple, но это не значит, что можно писать код, не изучая его.

Есть два способа инъекционного скрипты содержания:

1. Безоговорочно на всех указанных адресов, в этом случае "content_script" ключ используется в манифесте и сценарии содержание общения с фоном страницы с помощью runtime.sendMessage.
2. Только в случае возникновения какого-либо события, например, пользователь нажимает значок нашей панели инструментов, и в этом случае нам нужно только разрешение на access the active tab.

Так что в данном случае мы будем прикрепить обработчик значок щелчка и inject the code впоследствии:

• manifest.json:

  { 
      "name": "Title", 
      "description": "Description", 
      "version": "1.0", 
      "browser_action": { 
       "default_title": "Icon Title", 
       "default_icon": "icon.png" 
      }, 
      "background": { 
       "scripts": ["background.js"] 
      }, 
      "permissions": ["activeTab"], 
      "manifest_version": 2 
  } 
  

• background.js (это event page, потому что мы не использовали "persistent": true в манифесте, поэтому имейте в виду, что e [глобальные] переменные будут потеряны через несколько секунд бездействия; вместо этого вы должны использовать chrome.storage API или HTML5 LocalStorage/sessionStorage/и так далее):

  chrome.browserAction.onClicked.addListener(function(tab) { 
      chrome.tabs.executeScript({file: "jquery-1.7.2.min.js"}, function(result) { 
       chrome.tabs.executeScript({file: "content.js"}, function(result) { 
       }); 
      }); 
  }); 
  

• content.js (код runs in a sandbox так что нет необходимости скрывать глобальные переменные, используя IIFE)

  $('body').append("Hello"); 
  alert("Hello"); 
  console.log("Hello");