.vue文件其实是一个组件，关于它的说明我之前也写过一篇文章，地址： .vue文件，今天这篇文章要讲的是.vue文件中监听input的输入值变化事件。需求是这页面中，改变input的值，就调用一个事件，第一想到的是oninput。
oninput 事件在用户输入时触发，菜鸟教程中的用法是：

但是在.vue中这样写是没有作用的：

<input type="text" id="cardsNum2"  value="1" @oninput ="inputFunc">

这样写也没有作用：

<input type="text" id="cardsNum2"  value="1" v-on:oninput ="inputFunc">

最后，这样写才起作用：

<input type="text" id="cardsNum2"  value="1" v-on:input ="inputFunc">

希望这篇文章对您有所帮助！
个人微信公众号：侦探小禾子，闲聊育儿生活星座塔罗牌，野生法考通过者免费法律咨询，欢迎关注！

注意使用chrome.tabs.onUpdated.addListener需要在manifest.json声明tabs权限

permissions: [‘tabs’]

并且需要重新加载插件，如重新加载还是无法生效，请移除插件重新导入
/**
* 监听tab页面变化(用于处理页面logo问题)
*/
chrome.tabs.onUpdated.addListener(function(tabId,changeInfo,tab){
	if( changeInfo.url == undefined){return false;}
	// 检查是否是wish页面的tab
	if(tab.url.indexOf('pinterest.com') > 0){
		// 通知对应的tab页面url变化了,需要优化为离开立即移除，进入则加载完毕再添加
		if (tab.status === 'loading'){
		chrome.tabs.sendMessage(tabId,{type:'tabUpdate', tab:tab}, function(response)
		{
			console.log('来自content的回复：'+response);
		});
		}
	}
});

script_content接收
/**
* 接收后台发给content-script的消息
* 
*/
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse)
{
    if(request.type == 'tabUpdate'){
    	// GhandleInject_tabUpdate 自定义的一个函数，如果有定义这个函数则执行该函数，如果没有则不处理
        typeof(GhandleInject_tabUpdate) == 'function' && GhandleInject_tabUpdate();
    }
    // sendResponse('我收到了你的消息！');
});

cookie监听与赋值操作需要manifest文件里声明权限，cookie

权限如下：
{
	"permissions": [ "cookies", "*://*.要操作cookie的域名.com/*" ],
}

/**
* 监听cookie变化
*/
chrome.cookies.onChanged.addListener(function(changeInfo){
	// cookies.onChanged监听的是所有的cookie,所以需要过滤只处理我们网站自己的cookie
	if(GhomepageDomain == changeInfo.cookie.domain){
		var cookieNameReg = /[A-Z]/;
		var cookieInfo = changeInfo.cookie;
		if(!cookieNameReg.test(cookieInfo.name)){
			// cookie小写名的全部复制到plugin
			if(changeInfo.removed){
				// 移除cookie
				chrome.cookies.remove({
					url : Gplugin,
					name : cookieInfo['name']
				},function(_cookie){
					// console.log('移除,重新获取cookie',_cookie);
				 	// getUserInfo(1);
				});
			}else{
				// 设置cookie
				chrome.cookies.set({
					url: Gplugin,
					name: cookieInfo['name'],
					path: '/',
					value: cookieInfo['value'],
					expirationDate: cookieInfo['expirationDate'],
					secure: true,
					sameSite: 'no_restriction', // 不阻止跨域cookie,如果没有secure和sameSite这两个那么在chrome80以上的版本会出现iframe页面无法使用cooke
				},function(_cookie){
					// console.log('设置,重新获取cookie',_cookie);
					// getUserInfo(1);
				});
			}
		}
	}
});

注意：关于secure和sameSite不懂的可看廖雪峰的博客cookie的SameSite属性一篇

在页面头部加载完时立即注入下面代码，注入完成后如若有xhr请求就可以监听到了
;(function () {
	if ( typeof window.CustomEvent === "function" ) return false;
   
	function CustomEvent ( event, params ) {
		params = params || { bubbles: false, cancelable: false, detail: undefined };
		var evt = document.createEvent( 'CustomEvent' );
		evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
		return evt;
	}   
	CustomEvent.prototype = window.Event.prototype;   
	window.CustomEvent = CustomEvent;
})();
;(function () {
	function ajaxEventTrigger(event) {
		var ajaxEvent = new CustomEvent(event, { detail: this });
		window.dispatchEvent(ajaxEvent);
	}
    
	var oldXHR = window.XMLHttpRequest;
   
	function newXHR() {
		var realXHR = new oldXHR();

		realXHR.addEventListener('abort', function () { ajaxEventTrigger.call(this, 'ajaxAbort'); }, false);
		realXHR.addEventListener('error', function () { ajaxEventTrigger.call(this, 'ajaxError'); }, false);
		realXHR.addEventListener('load', function () { ajaxEventTrigger.call(this, 'ajaxLoad'); }, false);
		realXHR.addEventListener('loadstart', function () { ajaxEventTrigger.call(this, 'ajaxLoadStart'); }, false);
		realXHR.addEventListener('progress', function () { ajaxEventTrigger.call(this, 'ajaxProgress'); }, false);
		realXHR.addEventListener('timeout', function () { ajaxEventTrigger.call(this, 'ajaxTimeout'); }, false);
		realXHR.addEventListener('loadend', function () { ajaxEventTrigger.call(this, 'ajaxLoadEnd'); }, false);
		realXHR.addEventListener('readystatechange', function() { ajaxEventTrigger.call(this, 'ajaxReadyStateChange'); }, false);

		let send = realXHR.send;
		realXHR.send = function(...arg){
			send.apply(realXHR,arg);
			realXHR.body = arg[0];
			ajaxEventTrigger.call(realXHR, 'ajaxSend');
		}

		let open = realXHR.open;
		realXHR.open = function(...arg){
			open.apply(realXHR,arg)
			realXHR.method = arg[0];
			realXHR.orignUrl = arg[1];
			realXHR.async = arg[2];
			ajaxEventTrigger.call(realXHR, 'ajaxOpen');
		}

		let setRequestHeader = realXHR.setRequestHeader;
		realXHR.requestHeader = {};
		realXHR.setRequestHeader = function(name, value){
		    realXHR.requestHeader[name] = value;
		    setRequestHeader.call(realXHR,name,value)
		}
		return realXHR;
	}
   
 	window.XMLHttpRequest = newXHR;
})();
var Gpins_data = {};
// 监听页面的ajax
window.addEventListener("ajaxReadyStateChange",function(e){
	let xhr = e.detail;
	if(xhr.readyState == 4 && xhr.status == 200){
		// xhr.getAllResponseHeaders()  响应头信息
		// xhr.requestHeader            请求头信息
		// xhr.responseURL              请求的地址
		// xhr.responseText             响应内容
		// xhr.orignUrl                 请求的原始参数地址
		// xhr.body                     post参数，（get参数在url上面）
		
		console.log(xhr);
		
	}
});
// console.log({msg:'注入完成',time: (new Date()).valueOf(),data: new Date()});