使用 Chrome 扩展从文本字段调用 JS 函数

Question

I'm creating my first chrome extension and I'm having trouble calling JS functions from the html index page, I think the problem is in the background.js code, here are the components of my extension:我正在创建我的第一个 chrome 扩展，我无法从 html 索引页面调用 JS 函数，我认为问题出在 background.js 代码中，这是我的扩展的组件：

index.html
----------

<!doctype html>
<html>
<head>
<style>
html, body {
height: 80px;
width: 200px;
}
</style>
</head>
<body>
<h1>GRC</h1>
<form>
<div>
<label for="example">Veuillez saisir un code</label>
<input name="inpt" id="inpt"/>
<button id="btn" onClick="onClickHandler( document.getElementById('inpt').value )">Enter</button>
<script src="background.js"></script>
</form>
</div>
</body>
</html>

background.js
-------------

document.addEventListener('DOMContentLoaded', function () {
// Get button by ID
var button = document.getElementById('btn');
button.onclick = document.getElementById('inpt').value;
});

async function onClickHandler(f){
functions[f]();
const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
await chrome.scripting.executeScript({
target: { tabId: tab.id },
files: ['injector.js']

});
window.close();
}

injector.js
------------

functions = {
1 : function(){alert(1);},
2 : function(){alert(2);},
3 : function(){alert(3);},
4 : function(){alert(4);},
5 : function(){alert(5);},
6 : function(){alert(6);},
}

function onClickHandler(f){
functions[f]();
}

if you please have any suggestions and thank you in advance如果您有任何建议，请提前致谢

Answer 1

I advance a little after some modifications I now have the following codes:经过一些修改后，我前进了一点，现在我有以下代码：

popup.html popup.html

<!doctype html>
<html>
  <head>
<style>
body {
min-width: 120px;
overflow-x: hidden;
font-family: Arial, sans-serif;
font-size: 12px;
        }
        input, textarea {
            width: 140px;
        }
        input#save {
            font-weight: bold; width: auto;

        }
    </style>

  </head>
  <body>
<h1>GRC</h1>
    <center><form>
  <div>
<label><b>Veuillez saisir un code</b></label>
    <input name="inpt" id="inpt" autocomplete="off"/>
 <p>
<button id="btn">Enter</button>
<script src="popup.js"></script>
</p>
  </div>
</form></center>
  </body>
</html>

popup.js popup.js

    const button = document.getElementById('btn');
    const input = document.getElementById('inpt');
    
    button.onclick = async evt => {
    
      const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
      await chrome.scripting.executeScript({
        target: { tabId: tab.id },
        files: ['injector.js'],
    
      });
      await chrome.scripting.executeScript({
        target: { tabId: tab.id },
        func: inPage,
        args: [input.value],
      });
      window.close();
    };
    
    function inPage(popup) {
      functions[popup]();
}

injector.js注射器.js

functions = { 
  1 : function(){alert(1);}, 
  2 : function(){alert(2);}, 
  3 : function(){alert(3);},
  4 : function(){alert(4);}, 
  5 : function(){alert(5);}, 
  6 : function(){alert(6);}, 
}

but it still doesn't work if you have any suggestions please and thank you.但如果您有任何建议，它仍然不起作用，谢谢。

使用 Chrome 扩展从文本字段调用 JS 函数

问题描述

1 个解决方案

解决方案1
0 2022-09-21 07:01:58

popup.html popup.html

popup.js popup.js

injector.js注射器.js

使用 Chrome 扩展从文本字段调用 JS 函数

问题描述

1 个解决方案

解决方案1 0 2022-09-21 07:01:58

popup.html popup.html

popup.js popup.js

injector.js注射器.js

解决方案1
0 2022-09-21 07:01:58