Comment initialiser l'événement du clavier avec un char / keycode donné dans une extension Chrome?

Étant donné que Chrome ne conserve pas les propriétés personnalisées lorsque vous lancez un événement à partir d'un script Content sur la page (et vice versa), injectez un script dans la page pour reprendre ce travail. Voici un exemple de base qui montre l'idée. Il est utilisable, bien que les propriétés keyCode et keyCode ne soient pas correctement traitées (celles-ci ne devraient pas être utilisées de toute façon).

 // Example: Say, you've got a reference to a DOM element... var elem = document.body; // And you want to "type" "A" var charCode = 65; // Now, you want to generate a key event... triggerKeyEvent(elem, charCode); // triggerKeyEvent is implemented as follows: function triggerKeyEvent(element, charCode) { // We cannot pass object references, so generate an unique selector var attribute = 'robw_' + Date.now(); element.setAttribute(attribute, ''); var selector = element.tagName + '[' + attribute + ']'; var s = document.createElement('script'); s.textContent = '(' + function(charCode, attribute, selector) { // Get reference to element... var element = document.querySelector(selector); element.removeAttribute(attribute); // Create KeyboardEvent instance var event = document.createEvent('KeyboardEvents'); event.initKeyboardEvent( /* type */ 'keypress', /* bubbles */ true, /* cancelable */ false, /* view */ window, /* keyIdentifier*/ '', /* keyLocation */ 0, /* ctrlKey */ false, /* altKey */ false, /* shiftKey */ false, /* metaKey */ false, /* altGraphKey */ false ); // Define custom values // This part requires the script to be run in the page's context var getterCode = {get: function() {return charCode}}; var getterChar = {get: function() {return String.fromCharCode(charCode)}}; Object.defineProperties(event, { charCode: getterCode, which: getterCode, keyCode: getterCode, // Not fully correct key: getterChar, // Not fully correct char: getterChar }); element.dispatchEvent(event); } + ')(' + charCode + ', "' + attribute + '", "' + selector + '")'; (document.head||document.documentElement).appendChild(s); s.parentNode.removeChild(s); // The script should have removed the attribute already. // Remove the attribute in case the script fails to run. s.removeAttribute(attribute); } 

C'est un exemple simple qui déclenche l'événement de la keypress pour char "A". Si vous souhaitez déclencher des événements clés plus pertinents, n'utilisez pas triggerKeyEvent trois fois (car il comporte une légère surcharge). Au lieu de cela, modifiez la fonction triggerKeyEvent sorte qu'il déclenche tous les événements ( keydown , keypress , keyup et / ou input ) avec les paramètres appropriés.

Si vous devez modifier shiftKey , shiftKey , etc., modifiez simplement la fonction.
En bout de ligne: l'exemple que j'ai montré est très simple et peut être adapté à vos besoins.

Lire la suite

Si vous souhaitez modifier l'implémentation pour correspondre aux spécifications, lisez ces sources:

• W3C: Spécification des événements DOM Level 3, section Types d'événements clavier
• W3C: Spécification des événements DOM Level 3, annexe B: Attributs des clés héritées: keyCode, charCode et qui

Si vous souhaitez en savoir plus sur le concept d'injection de script dans un script de contenu, voir:

• Déploiement de pile: construire une extension Chrome – Injecter un code dans une page à l'aide d'un script de contenu

En cas de problème, j'ai dû déclencher une clé avec un code clé spécifique. C'est une façon.

Tout d'abord, j'ai essayé la réponse de @RobW ci-dessus sans chance. Aucun code de clé n'est passé, toujours indéfini.

Alors j'ai examiné la réponse de @ disya2 , qui a fonctionné.

Voici donc un code:

Manifeste

 "permissions": [ "debugger" ], 

ContentScript.js

 chrome.runtime.sendMessage({ pressEnter: true }); 

Background.js

 chrome.runtime.onMessage.addListener(function(message,sender,sendResponse){ if(message.pressEnter){ chrome.tabs.query({active: true}, function(tabs) { chrome.debugger.attach({ tabId: tabs[0].id }, "1.0"); chrome.debugger.sendCommand({ tabId: tabs[0].id }, 'Input.dispatchKeyEvent', { type: 'keyUp', windowsVirtualKeyCode:13, nativeVirtualKeyCode : 13, macCharCode: 13 }); chrome.debugger.sendCommand({ tabId: tabs[0].id }, 'Input.dispatchKeyEvent', { type: 'keyDown', windowsVirtualKeyCode:13, nativeVirtualKeyCode : 13, macCharCode: 13 }); chrome.debugger.detach({ tabId: tabs[0].id }); }); } }); 

J'ai trouvé que le protocole de débogueur chrome v1.1 est la réponse définie à la simulation d'événements clés et souris à partir d'une extension Google Chrome. Une partie du protocole est accessible via l' API chrome.debugger .