相关疑难解决方法(0)

我正在学习如何创建Chrome扩展程序.我刚开始开发一个来捕捉YouTube活动.我想将它与YouTube Flash播放器一起使用(稍后我将尝试使其与HTML5兼容).

manifest.json的:

{
    "name": "MyExtension",
    "version": "1.0",
    "description": "Gotta catch Youtube events!",
    "permissions": ["tabs", "http://*/*"],
    "content_scripts" : [{
        "matches" : [ "www.youtube.com/*"],
        "js" : ["myScript.js"]
    }]
}

myScript.js:

function state() { console.log("State Changed!"); }
var player = document.getElementById("movie_player");
player.addEventListener("onStateChange", "state");
console.log("Started!");

问题是控制台给了我"开始!" ,但没有"状态改变!" 当我播放/暂停YouTube视频时.

将此代码放入控制台时,它可以正常工作.我究竟做错了什么？

基本上我想在DIV的内容发生变化时执行脚本.由于脚本是独立的(chrome扩展和网页脚本中的内容脚本),我需要一种方法来简单地观察DOM状态的变化.我可以设置投票,但这似乎很草率.

出于在控制台中进行调试的目的,React中是否有任何机制可以使用DOM元素实例来获取后备React组件？

之前已在生产代码中使用此问题的上下文中询问过此问题.但是,我的重点是用于调试的开发版本.

我熟悉React的Chrome调试扩展程序,但并非所有浏览器都可以使用.结合DOM资源管理器和控制台,可以很容易地使用"$ 0"快捷方式访问有关突出显示的DOM元素的信息.

我想在调试控制台中编写类似这样的代码:getComponentFromElement($ 0).props

即使在React开发版本中,也没有机制可以使用元素的ReactId来获取组件？

我正在尝试在页面中加载（注入）javascript 代码。javascript 文件是扩展程序的本地文件。文件路径是“js/somefile.js”。

const basePath = chrome.runtime.getURL('');
    fetch(chrome.runtime.getURL(filePath), { mode: 'same-origin' }) // <-- important
      .then((_res) => _res.blob())
      .then((_blob) => {
        const reader = new FileReader();
        reader.addEventListener('loadend', (data) => {
          callback(data.currentTarget.result, basePath);
        });
        reader.readAsText(_blob);
      });

const scriptTag = document.createElement('script');
    scriptTag.innerHTML = scriptText;
    scriptTag.type = 'text/javascript';
    const scriptElement = document[injectLocation].appendChild(scriptTag);
    if (removeImmediately) document[injectLocation].removeChild(scriptElement);

我的网络可访问资源是：

"web_accessible_resources": [{
    "resources": [
    "js/*.js",
    ],
    "matches": ["<all_urls>"]
  }],

"content_security_policy": {
    "extension_pages": "script-src 'self'; object-src 'self'",
    "sandbox": "sandbox allow-scripts; script-src 'self' 'https://apis.google.com/' 'https://www.gstatic.com/' 'https://*.firebaseio.com' 'https://www.googleapis.com' 'https://ajax.googleapis.com'; object-src …

我正在尝试为浏览器的Web扩展测试示例代码.但是,它不起作用.我检查了控制台的谷歌浏览器和Firefox.它不打印任何东西.以下是我的代码:

manifest.json:

{
    "description": "Demonstrating webRequests",
    "manifest_version": 2,
    "name": "webRequest-demo",
    "version": "1.0",

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

background.js:

function logURL(requestDetails) {
    console.log("Loading: " + requestDetails.url);
}

chrome.webRequest.onBeforeRequest.addListener(
    logURL,
    {urls: ["<all_urls>"]}
);
console.log("Hell o extension background script executed");

我错过了什么吗？

我正在尝试学习如何制作 chrome 扩展，并一直在尝试使用新的清单 v3 进行学习，因为我的理解是它将成为未来的常态。但很多文档都相当残酷，而且似乎落后了。

我正在寻找一个简单的扩展来查找网站上的特定关键字。我想在用户访问网站时找到与特定 html id 匹配的文本。

目前，我的后台脚本调用单独的内容脚本来发现用户导航到的网站何时与我要搜索的网站相匹配。如果我到达适当的网站，则会调用另一个内容脚本来搜索该网站。

这是我的后台脚本中的相关代码：

if (onSite){
  scrapeSite(onSite);
}

onSite 仅当填充了我想要访问的网站的 url 时才是 true/active。

scrapeSite的相关代码是

function scrapeSite{
   try {
    book = document.getElementById("bookTitle");
    if (book){
     console.log(`${book}`);
     }
    }
    catch(err) {
      console.log(`No Book Title Found`);
      console.log(`${book}`);
     }
    }
}

如果我删除 catch(err)，则控制台日志会输出以下错误处理响应：ReferenceError: document is not Defined at scrapeSite

我真的只是想在这里学习，所以希望能得到任何关于更好的文档、推荐的 stackoverflow 问题等的建议。另外，如果您一直在学习清单 v3 并有关于好的文档/教程的建议，那就太好了。

我正在尝试创建一个 Chrome 扩展，允许用户在单击按钮后获取网页的选定文本，然后将该文本记录在控制台中。

但只有从 HTML 弹出窗口中选择文本时，我的代码才有效。如果我从随机网页中选择文本，然后单击“保存”按钮，则控制台中会打印一个空行。

我猜当显示扩展弹出窗口时，我的content.js文件无法与网页交互，但我不知道如何解决这个问题。我知道还有其他类似的问题，但我尝试过的任何方法（例如在不同 .js 文件之间传递消息）都不起作用。

这是我的文件：

清单.json：

{
"manifest_version": 3,
"version": "1.0",
"name": "test",
"action": {
    "default_popup": "index.html"
},
"permissions": [
    "tabs",
    "notifications"
],
"content_scripts": [
{   "matches": ["<all_urls>"],
    "js" : ["content.js"]}
],
"background":
{
"service_worker": "background.js"
}}

索引.html：

<html>
<head>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <p>Just some text.</p>
    <button id="save-btn">SAVE SELECTION</button>
    <script src="content.js"></script>
</body>
</html>

内容.js：

const saveBtn = document.getElementById("save-btn")

saveBtn.addEventListener("click", function(){
console.log(window.getSelection().toString())
})

我想将浏览器限制在一组URL中.我正在使用:

chrome.webNavigation.onBeforeNavigate.addListener(functon(details){
    if (notAllowed(details.url)) {
         // Do something to stop navigation
    }
});

我知道我可以取消chrome.webRequest.onBeforeRequest.但是,我不想阻止请求,例如XHR或其他任何请求.我希望此过滤器仅适用于导航.

对于用户来说,应该看起来,链接(例如<a href="http://...">foo</a>)点击事件已经停止.

基本上，我试图从<input>s选项卡上的复制数据，然后<input>使用chrome扩展名将其粘贴到另一选项卡上的表单s中。

我要弄清楚的部分是如何将数据从一个选项卡传输到另一个选项卡，以及如何定位正确的选项卡。

从表单输入中复制数据很简单document.getElementById()，我创建了一个content.js，当单击扩展图标时，它会在当前选项卡上运行。

表现

{
    "name": "AnalystWizard",
    "version": "1.0",
    "manifest_version": 2,
    "description": "Helping analysts since 2016",
    "background" : {
           "scripts" : ["background.js"]
        },
    "permissions": [
        "tabs", "<all_urls>"
    ],
    "browser_action": {
        "default_icon": "icon.png"
    }
}

Background.js

chrome.browserAction.onClicked.addListener(function(tab) {
   chrome.tabs.executeScript(null, {file: "content.js"});
});

Content.js

var name = document.getElementById("fname").value;
var street = document.getElementById("street").value;
var state = document.getElementById("state").value;

在这一点必要的数据存储在内部name，street和state变量。这是我遇到麻烦的地方。将数据存储在变量中后，如何告诉扩展程序允许用户定位新标签页？插入数据我可以做与上述相同的操作，但可以相反。

新标签：

document.getElementById("form1_name").value = name;
document.getElementById("form1_street").value = street;
document.getElementById("form1_state").value = state;

也许我可以popup.html从扩展程序中使用一种方法，该方法将有两个按钮，一个标记为 …

我有一个有这个元素的网站:

<input type="text" id="editpane_title" fnk="tt" maxlength="80" name="title" value="st benedict crucifix">

我希望使用Chrome扩展程序获取并设置该输入的值:

{
  "manifest_version": 2,
  "name": "demo",
  "version": "1.0",
  "description": "demo",
  "icons": { "16": "icon16.png",
             "48": "icon48.png",
             "128": "icon128.png" },

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

  "permissions": [ "tabs" ],

  "browser_action": {
      "default_icon": {
        "16": "icon16.png",
        "24": "icon24.png",
        "32": "icon32.png"
      },
      "default_title": "demo"
    }
}

而这里是background.js:

chrome.browserAction.onClicked.addListener(function(tab) {

    chrome.tabs.query({ active: true, lastFocusedWindow: true }, function (tabs) {

        var title = document.getElementById('editpane_title').value;
        alert(title);

    });


});

并且警报根本没有显示出来.我尝试了多次重装但仍然失败了.

我错过了什么？