google chrome extension - make - Detectar un clic del botón en la forma browser_action de una extensión de Google Chrome
make a google chrome extension (2)
La respuesta anterior ya no funciona y me tomó algunas horas entender cómo manejar un trabajo. Espero que esto te ayude a ir más rápido que yo.
Primero , usted es el último método en esta página (en la parte inferior de la página) y es asincrónico, así que recuerde darle una devolución de llamada. El código que necesitas es smtg así:
chrome.browserAction.onClicked.addListener(function (tab) {
chrome.tabs.query({''active'': true}, getActiveTabCallback);
});
En segundo lugar , debe comprender algo que me llevó algo de tiempo: si no está utilizando una página html de fondo, no podrá ver ningún console.log en la ventana principal de Chrome. Debes ir a la página de extensiones ( chrome://extensions ) y hacer clic en el enlace de la background page tus extensiones (sí, no tienes una página de fondo pero Chrome te da una página falsa). Este tipo de extensión (basada en eventos) debe tener el archivo manifest.json que contiene smtg como este:
"background": {
"scripts": ["background.js"],
"persistent": false
},
¡Saludos!
¿Cómo puede algo tan simple ser tan imposible?
Todo lo que quiero hacer es hacer clic en el botón browser_action de mi extensión, abrir un formulario con un par de configuraciones y luego hacer clic en el botón en el formulario para iniciar un proceso.
No puedo por mi vida obtener el botón clic en el formulario de fondo para trabajar.
He intentado obtener el ejemplo en http://developer.chrome.com/extensions/contentSecurityPolicy.html#H2-3 para que funcione, pero no es así. ¿Hay alguna diferencia entre las reglas para browser_action y background? ¿Es por eso que mi oyente de eventos no está disparando?
¿Puede alguien proporcionar un ejemplo de trabajo, por favor?
manifest.json:
{
"name": "Convert",
"version": "0.1",
"description": "Converts the current page",
"browser_action": {
"default_icon": "exticon.png",
"default_popup": "background.html"
},
"content_scripts": [{
"matches": ["*://*/*"],
"js": ["contentscript_static.js"]
}],
"permissions": [
"tabs", "http://*/*", "https://*/*"
]
}
background.html:
<html>
<head>
<title>Converter</title>
<script src="background.js"/>
<script>
// Initialize the localStorage
if (null == localStorage["htmlImport"])
localStorage["htmlImport"] = false;
// Called when the user clicks on the browser action icon.
chrome.browserAction.onClicked.addListener(function(tab) {
console.log(''in listener'');
// execute the content script
chrome.tabs.executeScript(null,
{
file: "contentscript.js",
allFrames: true // It doesn''t work before 4.0.266.0.
});
});
// Listen to the requests from the content script
chrome.extension.onRequest.addListener(
function(request, sender, sendResponse)
{
switch (request.name)
{
case "getPreferences":
sendResponse(
{
prefIgnoreLinks : localStorage["htmlImport"]
});
break;
case "PressShortcut":
sendResponse({}); // don''t response.
// execute the content script
chrome.tabs.executeScript(null,
{
file: "contentscript.js",
allFrames: true // It doesn''t work before 4.0.266.0.
});
break;
default:
sendResponse({}); // don''t response.
break;
}
});
</script>
</head>
<body style=''min-width:250px;''>
Link depth: <input type=''text'' name=''depth'' value=''3''/><br/>
<input type=''checkbox'' name=''changedomain''>Include external domains</input><br/>
<button id=''beginConvert''>Convert</button>
</body>
</html>
background.js:
function awesome() {
// Do something awesome!
console.log(''awesome'')
}
function totallyAwesome() {
// do something TOTALLY awesome!
console.log(''totallyAwesome'')
}
function awesomeTask() {
awesome();
totallyAwesome();
}
function clickHandler(e) {
setTimeout(awesomeTask, 1000);
}
// Add event listeners once the DOM has fully loaded by listening for the
// `DOMContentLoaded` event on the document, and adding your listeners to
// specific elements when it triggers.
//document.addEventListener(''DOMContentLoaded'', function () {
// document.querySelector(''button'').addEventListener(''click'', clickHandler);
//});
// Add event listeners once the DOM has fully loaded by listening for the
// DOMContentLoaded event on the document, and adding your listeners to
// specific elements when it triggers.
document.addEventListener(''DOMContentLoaded'', function () {
// console.log(''event listener for button connected to beginConversion()'');
//document.querySelector(''button'').addEventListener(''click'', beginConversion);
document.getElementById(''beginConvert'').addEventListener(''click'', clickHandler);
});
Tu meta
- Presione el botón de extensión
- La ventana emergente de extensión se abre con controles
- Ejecute la secuencia de comandos en la pestaña actual en función de los controles en la ventana emergente de extensión
Consejos
- Piense en la página de fondo como el centro de control. Toma las solicitudes entrantes de varios scripts en su extensión de Chrome, tiene permisos elevados para hacer cosas como solicitudes entre dominios (si están definidas en el manifiesto) y más.
- Debe usar la versión de manifiesto 2 ya que la versión 1 está en desuso.
- Manifest versión 2 no permite scripts en línea por lo que todos los scripts deberán cargarse como su propio archivo.
Ejemplo
manifest.json
{
"name": " Popup Example",
"manifest_version": 2,
"version": "0.1",
"description": "Run process on page activated by click in extension popup",
"browser_action": {
"default_popup": "popup.html"
},
"background": {
"scripts": ["background.js"]
},
"permissions": [
"tabs", "http://*/*", "https://*/*"
]
}
background.js
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
switch (request.directive) {
case "popup-click":
// execute the content script
chrome.tabs.executeScript(null, { // defaults to the current tab
file: "contentscript.js", // script to inject into page and run in sandbox
allFrames: true // This injects script into iframes in the page and doesn''t work before 4.0.266.0.
});
sendResponse({}); // sending back empty response to sender
break;
default:
// helps debug when request directive doesn''t match
alert("Unmatched request of ''" + request + "'' from script to background.js from " + sender);
}
}
);
popup.html
<html>
<head>
<script src="popup.js"></script>
<style type="text/css" media="screen">
body { min-width:250px; text-align: center; }
#click-me { font-size: 20px; }
</style>
</head>
<body>
<button id=''click-me''>Click Me!</button>
</body>
</html>
popup.js
function clickHandler(e) {
chrome.runtime.sendMessage({directive: "popup-click"}, function(response) {
this.close(); // close the popup when the background finishes processing request
});
}
document.addEventListener(''DOMContentLoaded'', function () {
document.getElementById(''click-me'').addEventListener(''click'', clickHandler);
})
contentscript.js
console.log("chrome extension party!");
Running Example Screenshots
Al hacer clic en el botón de extensión con la ventana del navegador abierta en exampley.com
Después de hacer clic en ''¡Hacer clic en mí!'' botón en ventana emergente de extensión