个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
28
4
关闭。这个问题需要details or clarity .它目前不接受答案。
想改善这个问题吗？通过 editing this post 添加详细信息并澄清问题.
4年前关闭。
Improve this question
单击 chrome 扩展图标时，我需要获取当前选项卡的源代码。我也试过按钮点击事件。请查看我当前的代码:
list 文件.json
{ "name": "UM Chrome Extension!", "version": "1.0",
"description": "To ensure the tracking codes present.",
"icons": {
"128": "TW-Extension-Icon2.png"
}, "background": {
"scripts": [ "background.js"]
},
"content_scripts": [
{
"matches": ["http://*/*"],
"js": ["popup1.js","jquery-1.10.2.js","jquery-ui.js","bootstrap.min.js"]
}
],
"permissions": [
"activeTab","tabs","contextMenus", "http://*/*"
],
"browser_action": {
"default_popup": "popup.html"
},
"manifest_version": 2
}
<!doctype html>
<html class="no-js" lang="">
<head>
<script type="text/javascript" src="popup1.js"></script>
</head>
<body style="width: 600px; height: 300px;">
<button value="Test" id="check-1"> </button>
</body>
</html>
window.addEventListener('DOMContentLoaded', function() {
var fbshare = document.querySelector('#check-1');
fbshare.addEventListener('click', function() {
var htmlCode = document.documentElement.outerHTML;
window.alert(htmlCode);
});
});
最佳答案
您的 list 同时包含 "content_scripts" (在 document_idle 上的页面上下文中运行)和 "browser_action"脚本(单击扩展菜单按钮时在独立上下文中运行)。
在 popup.html您引用 popup.js ，所以在 popup.js当您调用 document.documentElement.outerHTML您正在获取 popup.html 的内容，不是事件选项卡。
您引用了 popup.js和 popup1.js ，这令人困惑。您当前在弹出窗口和页面上下文中运行相同的代码，这几乎可以保证会中断其中之一。按照惯例使用 content.js在 "content_scripts"和引用popup.js在行动popup.html ."content_scripts"在每个页面中运行，无论用户是否点击扩展。您当前的 list 正在添加 ["popup1.js","jquery-1.10.2.js","jquery-ui.js","bootstrap.min.js"]到每一页，这是不必要的缓慢。
避免在 Chrome 扩展中使用 jQuery。它相当大，当您完全确定所有用户都在 Chrome 上时，浏览器标准化库不会增加太多。如果没有它你就不能编码，那么试着把它限制在你的弹出窗口中或动态加载它。
您设置了 "scripts": [ "background.js"] ，它在后台不断运行，在您当前的代码中根本不需要。如果您需要在操作按钮之外执行操作，请考虑使用 event pages反而。
使用 Chrome API 从弹出窗口的上下文中获取页面。您需要query chrome.tabs 获取事件选项卡，然后调用 chrome.tabs.executeScript 在该选项卡的上下文中执行脚本。
Google 的 API 使用回调，但在本例中我将使用 chrome-extension-async 允许使用 promise (还有其他库也这样做)。
在 popup.html (假设您使用 bower install chrome-extension-async ):
<!doctype html>
<html>
<head>
<script type="text/javascript" src="bower_components/chrome-extension-async/chrome-extension-async.js"></script>
<script type="text/javascript" src="popup.js"></script>
</head>
<body style="width: 600px; height: 300px;">
<button value="Test" id="check-1"> </button>
</body>
</html>
popup.js (丢弃
popup1.js):
function scrapeThePage() {
// Keep this function isolated - it can only call methods you set up in content scripts
var htmlCode = document.documentElement.outerHTML;
return htmlCode;
}
document.addEventListener('DOMContentLoaded', () => {
// Hook up #check-1 button in popup.html
const fbshare = document.querySelector('#check-1');
fbshare.addEventListener('click', async () => {
// Get the active tab
const tabs = await chrome.tabs.query({ active: true, currentWindow: true });
const tab = tabs[0];
// We have to convert the function to a string
const scriptToExec = `(${scrapeThePage})()`;
// Run the script in the context of the tab
const scraped = await chrome.tabs.executeScript(tab.id, { code: scriptToExec });
// Result will be an array of values from the execution
// For testing this will be the same as the console output if you ran scriptToExec in the console
alert(scraped[0]);
});
});
"content_scripts"在
manifest.json .您也不需要 jQuery 或 jQuery UI 或 Bootstrap。
关于google-chrome - Chrome 扩展程序 : get source code of active tab，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43511001/
28
4
0
这些指针之间有区别吗？每次通话到底发生了什么。 *p++ (*p)++, *(p)++ 最佳答案 1和3是一样的。 请记住 ++ 的后缀和一元形式。和 --有一个结果和一个副作用: x++ 的结果是
这个问题已经有答案了: difference between grep Vs cat and grep (5 个回答) 已关闭 8 年前。 我看到一个例子，其中有人这样做: cat source.tx
它曾经有效。现在，当我添加一个断点时: saveSnippet: (title, imageUrl, role) => { debugger; ... chrome (
开发.Net Web应用程序时，如果生成运行时错误，则会显示一些在Exception类中找不到的“额外”调试信息。 它显示了“源错误”部分，其中显示了代码摘录，其中行号准确显示了错误的产生位置，并显示
Firefox 中的“源”和“生成的源”有什么区别？ 请举例说明。 编辑: 7 月 3 日 “搜索引擎”使用哪个来源，生成的还是生成前的？ 最佳答案 Source 将显示页面加载的源(由服务器提供)。
对于具有两个不同工作表的Excel文件，我有两个OLE DB源。工作表A和工作表B。工作表A单元格I6包含日期，我想组合这两个源并在工作表B中添加一列，以将该值设置为工作表A的日期值。有可能做到吗？任
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
这是我的代码: import speech_recognition as sr r = sr.Recognizer() with sr.Microphone() as source: prin
我是 mysql 新手。我正在尝试 setter 工示例数据库 我尝试了 stackoverflow 中提到的一些方法，但没有帮助 谁能告诉我如何解决这个问题 SELECT 'LOADING depa
在终端中，我启动程序如下: 1) source env.sh 2) source activate enviroment 3) program --args 除了在 Pycharm 中并调试代码之外，
IntelliJ 如何知道目录是“源”还是“测试源”？如何始终将目录标记为“测试源”？ build.gradle 1 apply plugin: 'java' apply plugin: 'idea'
这个问题类似于Source script to separate environment in R, not the global environment , 但有一个关键的转折。 考虑一个源另一个脚
和有什么区别--devtool source-map & eval-source-map ? 最佳答案 webpack 文档有一个方便的图表，说明这些不同的选项可能适合哪些情况。 他们显示eval-s
这个问题已经有答案了: Issue with virtualenv - cannot activate (36 个回答) 已关闭 4 年前。 venv) C:\Users\Sunil\PycharmP
在以前版本的 Akka Streams 中，groupBy 返回一个 Source 的 Source 可以具体化为一个 Source[Seq [A]]. 在 Akka Streams 2.4 中，我看
这个问题已经有答案了: Issue with virtualenv - cannot activate (36 个回答) 已关闭 4 年前。 venv) C:\Users\Sunil\PycharmP
是否可以获取 Bash 片段的源代码，但仅在特定条件成立时才实际提供其中的函数？ 所以我要问的是，我可以无条件地获取目录中的所有文件，但获取的文件包含是否向采购外壳提供功能的逻辑。 例子: .bash
我无法查看 JavaCore.class 源代码，但我可以很好地使用代码。 例如，要查看方法JavaCore.create(..) 的源代码，我ctrl - click(或按f3) 在 JavaCor
-- Sample employee database -- See changelog table for details -- Copyright (C) 2007,2008, MySQL
当我在我的 IDE 中编译项目时它工作正常但是当我在 bamboo 中编译时它给我以下错误。 我已经检查过我在任务中配置的 jdk 版本是 1.6，我还尝试从 pom 中的 maven 插件强制执行
我是一名优秀的程序员,十分优秀！