Chrome应用程序在Webview中的按钮/输入上添加点击事件

Chrome App add click events on button/input inside the Webview

本文关键字：输入 添加 事件 按钮 应用程序 Webview Chrome      更新时间：2023-09-26

我制作了这个chrome应用程序，它使用网络视图从某个链接加载内容。我的问题是，我不知道如何将点击或其他事件添加到元素中，例如按钮。我需要使用webview，所以在扩展中构建内容不是一个选项。我还需要与webview元素进行通信/更改，因为我需要从USB设备获取数据，并在webview中填充一些输入。

我要么尝试了所有我发现的东西，但没有运气，要么做得很糟糕。

Thx！

这是我的包的index.html

<head>
<meta charset="utf-8">
<link rel="stylesheet" href="app.css">
<link rel="stylesheet" href="reset.css">
<script src="jquery.js"></script>
</head>
<body>
<webview id="webview" partition="persist:googlepluswidgets" style="width: 100%; height: 100%;" class="full trim"  src="http://urlOfApplication.com" ></webview>
<script src="main.js"></script>
<script src="port.js"></script>
<script src="printer.js"></script>
</body>

Manifest.json

{
  "name": "Tezaur - LOCAL",
  "version": "1.0.4",  
  "description": "Tezaur Amanet App",
  "permissions": ["webview", "serial","usb","videoCapture","fullscreen", "storage"],
  "minimum_chrome_version": "23",
  "manifest_version": 2,
  "icons": {
    "16": "gold-16.png",
    "128": "gold-128.png"
  },
  "app": {
    "background": {
      "scripts": ["background.js"]
    }
  }
}

background.js

chrome.app.runtime.onLaunched.addListener(function() {
      // Center window on screen.
  var screenWidth = screen.availWidth;
  var screenHeight = screen.availHeight;
    chrome.app.window.create('popup.html', {
        // 'id': 'amanet-app',
        'state' : 'maximized',
        'resizable' : true,
        'alwaysOnTop' : false,
        state: 'maximized'
    },
    function(win) {
        win.maximize();
        // win.clearAttention();
        // win.restore();
    }
    );
});
chrome.app.window.onClosed.addListener(function() {
  // Do some simple clean-up tasks.
  $.ajax({url:"http://tezaur-local/auth/logout", async:false});
  //var expires = new Date();
//  expires.setTime(expires.getTime() + (1 * 24 * 60 * 60 * 1000));
    //document.cookie = 'laravel_session=;path=/;expires=' + expires.toUTCString();
});
//chrome.app.window.canSetVisibleOnAllWorkspaces(false);

一种方法是使用webview.executeScript在webview内部运行内容脚本，因为它可以访问webview的DOM。

例如：

document.querySelector('webview').executeScript({
  code: 'document.getElementById("button-id").onclick = function() { /* click handler */ }',
  function(results) { if (results && results.length) { /* successful script injection */ }
});
相关文章：