解决javascript修改input值无效的问题


前言:这是一次很艰难的探索,为解决一点简单的问题却绕了很大的弯子,千牛电商平台改价中不能批量加价,由于公司电脑是古老的xp系统,所以只能我想到用写浏览器扩展操作页面修改值,可是碰到了标题上的问题…


经过几天查询百度,查看360浏览器扩展开发文档等,寻找到了几个有参考价值的文章,特别是这个:
记录一次艰难,却很有意思的问题解决经历-React input
还有这篇文章:js 模拟键盘输入

细节不多说了,成功解决!上代码:

扩展程序包含下列文件

    bindEvent.js
    icon.png
    manifest.json
    popup.html
    method.js

method.js文件

chrome.extension.onRequest.addListener(
    function (request, sender, sendResponse)
{
    if (request.hello == "ok")
    {
		
		// 这里写代码... 
        var inputs = document.getElementsByTagName("input");
		var price = inputs[inputs.length - 1];
        var new_price = (parseFloat(price.value) + 1.5).toString();
		var message = "原价格:" + price.value.toString() + "新价格:" + new_price;
        // price.value = new_price;
		
		// 解决descriptor拦截value值的问题
		let lastValue = price.value;
		// 第一次修改input值
		price.value = new_price;
		let event = new Event('input',{bubbles:true});
		let tracker = price._valueTracker;
		if (tracker){
			// 被拦截后再次修改input值
			tracker.setValue(new_price);
		}
		price.focus();
		price.dispatchEvent(event);
		
		
        sendResponse(
		{
				data: "修改成功!"
				}
			);
		}
	}
);

bindEvent.js文件

var a = document.getElementById('a');
a.onclick = function () {
	chrome.tabs.query({ currentWindow: true, active: true }, function (tabs) {
      chrome.tabs.sendRequest(tabs[0].id, { "hello": "ok" }, function (response) {
            alert(response.data);
        });
    });
}

manifest.json文件

    {
      "name": "阿狸扩展",
      "manifest_version": 2,
      "version": "1.0",
	  "author":"showbo,http://www.coding123.net",
      "description": "一个有趣的扩展程序。",
      "browser_action": {"default_popup": "popup.html","default_icon": "icon.png"},
      "content_scripts": [{"matches": ["*://*/*"],"js": ["method.js"]}],
      "permissions": ["*://*/*","tabs"],
      "devtools_page": "devtools.html"
    }

popup.html文件


<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>title>head>
<body>
<pre>请打开网站,然后运行。pre>
<a id="a" href="#" size="20">starta>

<script src="bindEvent.js">
script>
body>
html>

总结:

本文主要是解决修改input值无效的问题,参考method.js文件,为了保证上下文可读性,所以放出全部的完整代码。

你可能感兴趣的:(笔记,chrome,devtools)