Question

我正在尝试开发Chrome扩展程序，以使用IE Tab扩展程序在新标签页中打开存储在Confluence中的Office文档。

在“查看页面附件”屏幕中，Office文件附件中有一个“在Office中编辑”链接。该链接有一个click事件，用于创建URLLauncher的新实例，该实例用于打开文档。 Chrome不支持此功能，因此我想将自己的URLLauncher原型添加到网页中，以使其正常运行。

简而言之，这是我的想法：

使用内容脚本创建Chrome扩展程序，该脚本会将URLLauncher原型注入“查看页面附件”页面（我不知道这是否是正确的方法，因此我愿意接受建议）。< / LI>
当用户点击“在办公室编辑”链接时，URLLauncher.open方法会通过调用IE Tab扩展程序在新标签页中打开文件附件。

我可以看到'你好！'每次加载网页时都会发出警报，并确认正在注入content.js。然而，网页中没有URLLauncher。我认为这是因为内容脚本的全局window对象与页面/扩展的全局命名空间不同（即window.URLLauncher未定义）。我怎样才能重组我的代码以克服这个障碍？

这些是我的文件：

的manifest.json

{
   "manifest_version": 2,
   "background": {
      "scripts": [
         "background.js"
      ]
   },
   "content_scripts": [ {
      "js": [ "content.js" ],
      "matches": [ "<all_urls>" ]
   } ],
   "description": "This is a test extension",
   "permissions": [
      "tabs", "http://*/*", "https://*/*"
   ],
   "name": "Test extension",
   "version": "1.0.0"
}

background.js

chrome.tabs.executeScript(null, { 
   code: "document.body.appendChild(document.createElement('script')).src='" + 
   chrome.extension.getURL("content.js") + "';" 
}, null);

chrome.runtime.onMessage.addListener(
   function(request, sender, sendResponse) {
      console.log(sender.tab ?
            "from a content script:" + sender.tab.url :
            "from the extension");
      if (request.id == "doUrlLaunch") {        
         chrome.tabs.create({ url: request.nUrl, selected: true });
         sendResponse({result: "goodbye"});
      }
   }
);

content.js

var prefixUrl = 'chrome-extension://hehijbfgiekmjfkfjpbkbammjbdenadd/iecontainer.html#url=';
alert('Hi there!');
function URLLauncher() {

}

URLLauncher.prototype = {  
   open : function(urlStr) {
      var newUrl = prefixUrl + 'https://host.com' + encodeURI(urlStr);
      chrome.runtime.sendMessage({id: "doUrlLaunch", nUrl: newUrl}, function(response) {
      });
   }
}

提前致谢。

更新1

我按照Rob W和page（'消息传递'）给出的说明编辑了文件;现在代码注入页面本身，但仍然存在一个主要问题。实际的JS代码向内容脚本发送消息，但是侦听器未捕获该消息，因此不会创建新选项卡，并且回调函数不会收到响应;我得到的错误消息：（未知）事件处理程序中的错误：TypeError：无法读取未定义的属性“成功”。

这些是更新的文件：

的manifest.json

{
   "manifest_version": 2,
   "content_scripts": [ {
      "js": [ "content.js" ],
      "matches": [ "<all_urls>" ]
   } ],
   "web_accessible_resources": [ "script.js" ],
   "description": "This is a test extension",
   "permissions": [
      "tabs", "http://*/*", "https://*/*"
   ],
   "name": "Test extension",
   "version": "1.0.0",
   "externally_connectable": {
      "ids": ["*"],
      "matches": ["*://*.hostname.com/*"]
   }
}

content.js

var s = document.createElement('script');
s.src = chrome.extension.getURL("script.js");
s.onload = function() {
    this.parentNode.removeChild(this);
};
(document.head||document.documentElement).appendChild(s);

chrome.runtime.onMessage.addListener(
//Unreachable code!
   function(request, sender, sendResponse) {
      console.log(sender.tab ?
            "from a content script:" + sender.tab.url :
            "from the extension");
      if (request.id == "doUrlLaunch") {        
         chrome.tabs.create({ url: request.nUrl, selected: true });
         sendResponse({result: "goodbye"});
      }
   }
);

的script.js

var prefixUrl = 'chrome-extension://hehijbfgiekmjfkfjpbkbammjbdenadd/iecontainer.html#url=';
function URLLauncher() {

}

URLLauncher.prototype = {  
   open : function(urlStr) {
      var newUrl = prefixUrl + 'https://hostname.com' + encodeURI(urlStr);
      chrome.runtime.sendMessage({id: "doUrlLaunch", nUrl: newUrl}, function(response) {
          if (!response.success)
              console.log('Something went wrong...');
      });
   }
}

Answer 1

不确定您是否仍然对答案感兴趣，但在您编辑的文件中，您的问题就在于听众所处的位置。

chrome.runtime.sendMessage无法访问内容脚本;它适用于扩展页面。 传递给内容脚本的消息通过chrome.tabs.sendMessage工作，但这与此任务无关。
内容脚本无法调用chrome.tabs，因为他们没有所需的API访问权限。

解决方案是调用后台脚本，该脚本可以接收这些消息，并可以调用所需的API。

因此，您需要第三个脚本，从content.js中取出此代码：

// background.js
chrome.runtime.onMessage.addListener(
   function(request, sender, sendResponse) {
      console.log(sender.tab ?
            "from a content script:" + sender.tab.url :
            "from the extension");
      if (request.id == "doUrlLaunch") {        
         chrome.tabs.create({ url: request.nUrl, selected: true });
         sendResponse({result: "goodbye"});
      }
   }
);

修改你的清单：

  "background": { "scripts": [ "background.js" ] },

使用Chrome内容脚本以编程方式将代码插入Confluence页面

1 个答案: