相关疑难解决方法(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视频时.

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

我想从React Element的实例调用React组件公开的方法.

例如,在这个jsfiddle https://jsfiddle.net/r6r8cp3z/我想alertMessage从HelloElement引用中调用该方法.

有没有办法实现这一点,而无需编写额外的包装器？

编辑(从JSFiddle复制代码)

<div id="container"></div>
<button onclick="onButtonClick()">Click me!</button>

var onButtonClick = function () {

    //call alertMessage method from the reference of a React Element! Something like HelloElement.alertMessage()
    console.log("clicked!");
}

var Hello = React.createClass({displayName: 'Hello',

    alertMessage: function() {
        alert(this.props.name);                             
    },

    render: function() {
        return React.createElement("div", null, "Hello ", this.props.name);
    }
});

var HelloElement = React.createElement(Hello, {name: "World"});

React.render(
    HelloElement,
    document.getElementById('container')
);

我正在编写Chrome扩展程序,并<div>在popup.html文件中单击按钮后尝试覆盖当前网页.

当我document.body.insertBefore从popup.html中访问该方法时,它会覆盖<div>弹出窗口而不是当前网页.

我是否必须在background.html和popup.html之间使用消息传递才能访问网页的DOM？我想在popup.html中做所有事情,并且如果可能的话也使用jQuery.

React Developer Tools提供了很多功能来检查React组件树,并查看道具,事件处理程序等.但是,我真正想做的是能够在浏览器控制台中检查这些数据结构.

在chrome中,我可以使用控制台中当前选定的DOM元素$0.有没有办法从$0React Dev Tools中提取React组件信息,或者是否可以使用React Dev Tools进行类似的操作？

我希望能够弄清楚React组件与某个DOM元素相关联的内容.

例如,假设我有一个div,并且我使用React渲染我的整个应用程序.div必须由React组件呈现 - 但是哪一个？

我知道React提供了方法" getDOMNode "来获取与React组件关联的DOM节点,但我想做相反的事情.

这可能吗？

如何以编程方式设置React生成的输入字段的值,使用vanilla JS还是JQuery？

我尝试过以下内容似乎没有任何效果.

$(obj).val('abc');
$(obj).attr('value', 'abc');
$(obj).keydown();
$(obj).keypress();
$(obj).keyup();
$(obj).blur();
$(obj).change();
$(obj).focus();

我也试图模拟keyPress(如此处所示)事件,但它似乎也没有用.

simulateKeyPresses (characters, ...args) {
  for (let i = 0; i < characters.length; i++) {
    this.simulate('keyPress', extend({
      which: characters.charCodeAt(i),
      key: characters[i],
      keyCode: characters.charCodeAt(i)
    }, args));
  }
}

是否可以通过greasemonkey访问reactjs props和states？我可以在反应控制台中看到道具和状态，但据我所知，我无法利用greasemonkey与其交互。

我可以使用 React 开发者工具检查组件的 props。是否可以在不使用开发人员工具的情况下从控制台从其相应的 HTML 元素获取组件的 props？

解决方案是这样的：

const someElement = document.querySelector('.some-element')
getElementReactProps(someElement)

我尝试检查 HTML 元素的属性__reactFiber$at69yqn7c1k，__reactProps$at69yqn7c1k但找不到我在 React 开发人员工具中看到的任何属性。

我还发现了其他堆栈溢出线程，但没有一个起作用。（React - 从 DOM 元素获取组件进行调试，React - 从子 DOM 元素获取 React 组件？，如何在控制台中检查 React 元素的 props 和状态？）

有任何想法吗？

我正在开发一个应用程序，在该应用程序中，我可以在打开 3rd 方网站后在浏览器上下文中运行我自己的 Javascript。作为一个基于 reactjs 并有登录表单的示例网站，您可以参考这个链接。

我正在尝试在 reactjs 生成的表单中填写用户名和密码。但是，我无法完全实现它。

我能够在用户名/密码字段和 reactjs 内部设置值的最接近的代码库是：

function setNativeValue(element, value) {
    element.focus();
    element.click();
    element.value = value;
    element.defaultValue = value;
    let tracker = element._valueTracker;
    if (tracker) {
        tracker.setValue(lastValue);
    }
    let inputEvent = new Event("input", { target: element, bubbles: true });
    inputEvent.simulated = true;
    element.dispatchEvent(inputEvent);
}

document.getElementsByClassName("sc-qamJO")[0].click(); // login top button
setTimeout(function () {
    setNativeValue(document.getElementsByClassName("sc-AxheI")[1], "username"); // username
    setNativeValue(document.getElementsByClassName("sc-AxheI")[2], "password"); // password

    setTimeout(function () {
        document.getElementsByClassName("sc-fzpans")[3].click(); // login button
    }, 1000);
}, 1000);

问题： 但是，我无法自动提交 reactjs 表单。它抛出一个错误 …

对于类组件，我们可以使用

this._reactInternalFiber._debugOwner.type.name 

如React Access parent component name 中所述。

但是有没有办法在功能组件中做同样的事情？

我正在使用 redux 进行反应并使用 cypress 进行测试，我能够使用 cy.window().its('store').invoke('getState').then((state) => {} 但是我如何访问组件的本地状态而不是应用程序商店？

我试过

cy.get('.simple-component').its('getState')

或者

cy.get('.simple-component').invoke('getState')

但赛普拉斯正在返回“赛普拉斯错误：重试超时：cy.invoke() 出错，因为属性：'getState' 在您的主题上不存在”并且在赛普拉斯控制台上（在 chrome 中）它正在发出：

Yielded:   
<div class="simple-component" getstate="[object Object]"></div>

这似乎是由 React 从 DOM 中删除方法造成的，所以我需要在 React 中而不是在 DOM 中访问它？

import React, { Component } from 'react';

class simpleComponent extends Component {
    constructor(props) {
        super(props)
        this.state = {
            sample: "hello"
            }
    }
    // getState() just for testing on cypress
    getState() {
      return this.state
    }
    render(){
      return <div className="simple-component" getState={this.getState()}></div>
    }    
}

作为替代方案，我可以使用 window.store 在简单组件的末尾导出本地组件状态吗？

我希望我的 Chrome 扩展能够与包含一些简单 React 组件的页面进行交互 - 一个位于大量纯 javascript/html 中间的表格。

我的扩展不是用 React 构建的。

您可以通过 Chrome 扩展将什么脚本注入到页面中，以访问 React Elements（获取其键值等）？一个简单的例子将极大地帮助我......

这是我到目前为止所做的：

我可以注入脚本并附加到页面正文...但不确定如何“导入反应”或以其他方式利用页面上的 React 代码。

使用控制台中的 React 检查器，我可以看到一个以行作为子元素的元素。

我如何获得该元素的子元素？例如，他们的关键价值观是什么？

如果我注入以下脚本，我只会收到“意外标识符”错误：

import React from 'react';
import ReactDOM from 'react-dom';

我已经尝试了以下内容的变体（在我注入的脚本中）...没有找到 React（我知道它在那里）...记录了“Inside FindReact function...1”消息，但没有其他内容（所以我知道我的脚本注入没有错误）。

console.log('In React script...run sub...');
reactSub();

function reactSub(){
    console.log('Inside FindReact function...1');
    window.FindReact = function(dom) {
        for (var key in dom) {
                    console.log('Loooping...');
            if (key.startsWith("__reactInternalInstance$")) {
                var compInternals = dom[key]._currentElement;
                var compWrapper = compInternals._owner;
                var comp = compWrapper._instance;
                            console.log('Inside FindReact function...2') + console.log(comp);
                return …