为什么这个 chrome 扩展不起作用？答案

【问题标题】：Why doesn't this chrome extension work?为什么这个 chrome 扩展不起作用？
【发布时间】：2017-02-02 16:36:25
【问题描述】：

我想将网页的 url (var name is 'url') 收集到 chrome 扩展中的变量中，连同文本输入中的几个用户输入，并将其发送到远程 php 脚本以处理成sql数据库。我正在使用 AJAX 连接到远程服务器。 popup.html 包含一个简单的 UI 表单，popup.js 收集变量并建立 AJAX 连接。如果我使用 url = document.location.href 我得到 popup.html 的 url，而不是我想要处理的页面 url。我尝试使用 chrome.tabs.query() 来获取 lastFocusedWindow url - 脚本如下。没发生什么事！获取 lastFocusedWindow url 看起来应该很简单，但它会导致脚本失败。 manifest.json 在权限中设置了'tabs'、https://ajax.googleapis.com/ 和远程服务器 ip（目前在 LAN 内）。 popup.html 有用于描述的 UI 和一些标签。（顺便说一句，响应也不起作用，但目前我不介意！）

//declare variables to be used globally
var url;

// Get the HTTP Object
function getHTTPObject(){
 if (window.ActiveXObject) return new    ActiveXObject("Microsoft.XMLHTTP");
 else if (window.XMLHttpRequest) return new XMLHttpRequest();
 else { 
alert("Your browser does not support AJAX.");
     return null;
 } 
 // Change the value of the outputText field THIS PART IS NOT WORKING YET
function setOutput(){
if(httpObject.readyState == 4){
    //document.getElementById('outputText').value = httpObject.responseText;
"Bookmark added to db" = httpObject.responseText; // does this work?    
}
}
//put URL tab function here
chrome.tabs.query(
{"active": true, "lastFocusedWindow": true}, 
    function (tabs) 
    {
        var url = tabs[0].url; //may need to put 'var' in front of 'url' 
    }
);
// Implement business logic    
function doWork(){    
    httpObject = getHTTPObject();
if (httpObject != null) {
//get url? THIS IS OUTSTANDING - url defined from chrome.tabs.query?
description = document.getElementById('description').value;
tag1 = document.getElementById('tag1').value;
tag2 = document.getElementById('tag2').value;
tag3 = document.getElementById('tag3').value;
tag4 = document.getElementById('tag4').value;
    httpObject.open("GET", "http://192.168.1.90/working/ajax.php?url="+url+"&description="+description+"&tag1="+tag1+"&tag2="+tag2+"&tag3="+tag3+"&tag4="+tag4, true);
    httpObject.send(null); 
    httpObject.onreadystatechange = setOutput();  //THIS PART IS NOT WORKING
finalString = httpObject.responseText; //NOT WORKING
return finalString;  //not working
} //close if
} //close doWork function
var httpObject = null;
var url = null;
var description = null;
var tag1 = null;
var tag2 = null;
var tag3 = null;
var tag4 = null;    
// listens for button click on popup.html
document.addEventListener('DOMContentLoaded', function () {
document.querySelector('button').addEventListener('click', doWork);
});

【问题讨论】：

标签： javascript ajax google-chrome tabs

【解决方案1】：

没有回复，我首先使用了一个小书签。小书签将 url 和标题传递给 php 脚本，该脚本将它们输入数据库，然后将用户重定向回他们所在的页面。

javascript:(function(){location.href='http://[ipaddress]/bookmarklet.php?url='+encodeURIComponent(location.href)+'&description='+encodeURIComponent(document.title)})()

然后我发现这段代码很有效。

var urlOutput = document.getElementById('bookmarkUrl');
var titleOutput = document.getElementById('bookmarkTitle');

if(chrome) {
chrome.tabs.query(
{active: true, currentWindow: true},
(arrayOfTabs) => { logCurrentTabData(arrayOfTabs) }
);
} else {
browser.tabs.query({active: true, currentWindow: true})
.then(logCurrentTabData)
}
const logCurrentTabData = (tabs) => {
currentTab = tabs[0];
urlOutput.value = currentTab.url;
titleOutput.value = currentTab.title;
}

【讨论】：